WooCommerce Single Product Page too wide (on Mobile especially) :(

[xgracjan1]

Hello guys!

I tried everything but can’t find it 🙁
I have too wide single product page – on mobile it’s full-wide (text + photos), on desktop I got only few px padding.
How can I change it?

I would like to have paddings on the product page like this website (your theme):
https://afvalleniskut.nl/product/het-boek-afvallen-is-kut/

best regards,
Gracjan

[SeaTheme]

Hi,

There is not a special custom CSS for padding on the webpage that you listed.
It should not too wide for a single product page normally. Please stop all 3rd plugins to check again.
Could you please leave your own product page URL if it doesn’t work still? Thanks

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[xgracjan1]

https://brogermoto.com/produkt/alaska-lady-caramel-shirt/

I would like it to look like this:
https://afvalleniskut.nl/product/het-boek-afvallen-is-kut/

But as you can see – it’s very wide for mobile and desktop.

[SeaTheme]

Hi,

The container width is set 1070 for afvalleniskut.nl
Please go to Art Theme > Theme Options > General settings, find
Main Container Type, select “Fixed width”, you could select 1070 or 970

Please clean the website cache(cache plugin) to check after the change.

I suggest you upgrade the ART theme and BM content builder to the latest version if it doesn’t work. Please backup the website before the update.

ps: But I found the codes on the page are different from the default codes. Did you change the PHP files in the theme folder or use the child theme?

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[brogermoto]

Hi, Gracjan here – I’m writing from different account – the actual one where I bought a licence for the website brogermoto.com

When I changed the Main Container Type for the Fixed width – 1070 – the product page has good width only on Desktop; on mobile it’s still full-wide.

I added 2 codes via Snippet Plugin:

1.
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40 );

2.
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );
remove_action( ‘woocommerce_simple_add_to_cart’, ‘woocommerce_simple_add_to_cart’, 30 );
remove_action( ‘woocommerce_grouped_add_to_cart’, ‘woocommerce_grouped_add_to_cart’, 30 );

[SeaTheme]

Hi,

The fixed-width 1070 will affect the whole website. I suggest you return to fluid width.
And, use the custom CSS(“Appearance > Customize: Additional CSS”) to fix(add padding on left/right) the product pages:

body.single-product .container-fluid {
    padding-right: 160px;
    padding-left: 160px;
}
@media (max-width: 767px){
.responsive-ux.single-product .container-fluid {
    padding-right: 40px;
    padding-left: 40px;
 }
}

ps: you could adjust the 160px as you wish

Best

[Author]

Posts