Return to previous page

Different Single Product Page Layout for Mobile Versions

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

Safe Desires

Participant

May 16, 2024 at 04:24

Is there a way to have a completely different layout for mobile version of single product pages? Currently, due to our lengthy product description, a customer sees images, the description and has to scroll to find the color swatches.
1) Can one product page include two color variation swatches? The first one right below the pictures and the 2nd one where it currently is.
2) Can an accordion (preferably “Read More”) function for the description so only about 2-3 lines show by default so the customer can see the variation options right below it.

Thank you

Please, contact administrator
for this information.

#395368 Copied Theme version: 9.3.10

1 Answer

Tony Rodriguez

Support staff

May 16, 2024 at 08:43

Hello, @Safe Desires,

Thank you for contacting us and for using XStore.

1/ We are delighted to inform you of the capability to create distinct layouts for the mobile and desktop versions on a single Product Page. This functionality can be implemented by designing separate sections for each device type and applying the visibility feature to show or hide these sections as needed.

To assist you in this setup, we have prepared a video tutorial that you can view at your convenience. Please access the tutorial here: https://streamable.com/ottm2x

For further details and step-by-step guidance, we encourage you to consult the official Elementor plugin documentation. You can read the relevant article by following this link: (https://elementor.com/help/show-or-hide-columns-per-device/)

We hope you find these resources helpful for enhancing your website’s functionality.

2/ We are pleased to share with you a video tutorial that demonstrates how to add multiple product swatches on the Single Product Page. The video specifically illustrates the process of integrating a second product swatches widget below the product image and configuring its visibility settings to ensure it is hidden on desktop devices and only displayed on mobile devices.

Please access the video through the following link: (https://streamable.com/goye0m)

3/ We regret to inform you that the default configuration of the Short Description Widget in a product does not support the “Read More” functionality. Implementing this feature necessitates additional code customization.

As an alternative, you may consider utilizing a third-party plugin to achieve this functionality. However, please be aware that using third-party plugins can carry certain risks.

Should you require further assistance or have any questions, please do not hesitate to contact us.

Best Regards,
The 8Theme Team

#395418 Copied
Tagged: custom mobile product page, mobile single product layout, optimized mobile woocommerce, responsive woocommerce design, woocommerce themes, wordpress mobile themes
Viewing 2 results - 1 through 2 (of 2 total)