Return to previous page

“SINGLE PRODUCT BUILDER” Breakes in mobile version

This topic has 2 replies, 2 voices, and was last updated 2 years, 1 months ago ago by Tony Rodriguez

Kelgor

Participant

October 15, 2022 at 19:14

Recently I have designed a version of “single product” for the desktop view, with a floating column and a sticky “add to cart”.
When the desktop version automatically adapts to the mobile version, it breaks completely.

On the one hand, the floating element is placed below the first column, in my case, after the long description and the opinions.

-> Column 2 under Column 1: https://gyazo.com/2ac7bf3dfda5315302fa9ab16bc33810
visit https://moydog.com/p/royal-canin-exigent-cats/ to check.

On the other hand, the sticky menu is not “activated” until you reach the footer of the page, because it understands that what you are consulting is the product.

-> Sticky menu too far: https://gyazo.com/fdce931c3d49c11b00c145b503d30d2e
visit https://moydog.com/p/royal-canin-exigent-cats/ to check.

I NEED to create two different SINGLE PRODUCT versions or a solution, it is impossible to design a product page and have to decide where to display it correctly, in mobile version or on desktop.

PLEASE visit https://moydog.com/p/royal-canin-exigent-cats/ to check the mobile version vs desktop.

Thanks!

#336550 Copied Theme version: 8.3.5 WooCommerce version: 6.8.2

1 Answer

Tony Rodriguez

Support staff

October 16, 2022 at 10:22

Hello, @Kelgor,

First of all, please note that there is no separate option to create the mobile version layout for the single product page, The mobile version automatically adapts the style/design of the desktop version based on responsiveness.

About the sticky add-to-cart section, let me try to explain its functionality to you, that how it works. The Sticky Add to Cart section only appears to show when the add to cart button will be moved up/down from the screen, like:

You can see in this image: https://postimg.cc/307sYfy4 that I have scrolled down to the bottom but the add to cart button is there on the screen so till that add to cart button is there the sticky will not show, and as soon as the add to cart button will disappear and move up/down from the screen, the sticky add to cart button will show at that time: https://postimg.cc/ykq8M7YW so this is how it works, and in your case, it is same, you have the add to cart button in the sticky sidebar and that sticky sidebar will move to the page till bottom and that is the reason the sticky add to cart section shows at very bottom when scrolling down to the page, hope this is clear enough now.

And for other columns settings like above or bottom on the mobile version of the content, we have to check it on your site, so please share your site WP Admin URL and Credentials with me here in the private content area of this topic so that I will further look into it for you and help you out accordingly.

Regards 8Themes Team.

#336572 Copied
Tagged: customizable, mobile, product builder, single breakes, template, woocommerce, wordpress
Viewing 2 results - 1 through 2 (of 2 total)