Return to previous page

Single Product Page – Support Gallery Layout Customization

This topic has 13 replies, 3 voices, and was last updated 7 months, 2 weeks ago ago by ecommercedev

ecommercedev

Participant

September 18, 2023 at 01:54

Hi,
Is there any way to change gallery layout in Single Product Page without enabling Single Page Builder?

#367714 Copied Theme version: 9.1.14

12 Answers

Tony Rodriguez

Support staff

September 18, 2023 at 05:05

Hello, @ecommercedev,

Thank you so much for purchasing our theme and contacting our support center.

Yes, it is indeed possible to modify the gallery layout in the Single Product Page without the necessity of enabling the Single Product Builder.

To do this, you need to choose the layout of the single product page by navigating to XStore > Theme Options > Woocommerce > Single Product Page > Layout > Select Layout. Choose the layout that best suits your needs and then publish it.

Please refer to the attached image for further clarification.
https://imgur.com/4Ffq4jl

Best Regards,
8Theme’s Team

#367715 Copied

ecommercedev

Participant

September 18, 2023 at 21:04

Hi,

Thank you for your response.

I think I should add more details to my question, sorry about that. I want to make the sticky description and scrollable gallery with 2 columns.

I saw its possible in Single Page Builder, but I was just wondering if its possible to do in Single Product Page settings without having to go and set everything up from scratch in builder?

#367814 Copied

Tony Rodriguez

Support staff

September 19, 2023 at 08:22

Hello, @ecommercedev,

We kindly request you to review our demo site and provide us with the URL of the product page that you would like to replicate for your single product page.
https://preview.themeforest.net/item/xstore-responsive-woocommerce-theme/full_screen_preview/15780546?_ga=2.247388614.337031548.1695008228-1722493123.1689058873

We kindly request you to provide us with the URL of the single product page of your website. and please share your site WP-ADMIN Login details in the below-listed format in private content area of this topic,on which you are facing the issue, so we can take a closer look and assist you accordingly.

WP Admin URL:
WP Admin Username:
WP Admin Password:

We kindly recommend that you take a complete backup of your site before proceeding.

We look forward to your response.

Best Regards,
8Theme’s Team.

#367839 Copied

ecommercedev

Participant

September 19, 2023 at 22:54

Hi,

It will be easier if I show you representation of what I wanted to achieve:

https://www2.hm.com/en_gb/productpage.1100859008.html

It is 2 column gallery with sticky description. However, I already achieved that with Single Page Builder. I was just wondering if its possible without messing around with Page Builder.

Yet still I have few issues with that layout.

1. Main header:
– Header Builder -> Header Sticky -> Main Header Sticky option is ON
– Header Overlap & Transparent -> Header Overlap -> option is ON
– Single Page Builder -> Layout -> Full Width option is ON

You can see the Main Header overlaps single product page container content.

2. When you scroll down the page you can see the Product Title jumping down a line.

3. There is no right-margin in SECTION2 section. I tried to add 15px right margin to SECTION2 but it does nothing. When you scroll somehow the margin appears on the right (which possibly also causes the Product Title to jump).

4. I have turned ON ‘Stretch Add to Cart’ option. However you can see the ‘Add to cart’ button does not stretch from side to side on product page.

I do not use any caching plugins.

Please contact administrator
for this information.

#367925 Copied

Tony Rodriguez

Support staff

September 20, 2023 at 08:43

Hello, @ecommercedev,

We appreciate your provision of the reference site for which you aim to replicate the layout of a single product page on your site.

This can be accomplished using the custom single-product page builder. Please navigate to Xstore > Theme Options > Woocommerce > Single Product Builder and customize the single product page according to your needs.

Please refer to the attached image for guidance.
https://imgur.com/4f7wVVt

https://imgur.com/nCrsLC0

Yet still I have few issues with that layout.

1. Main header:
– Header Builder -> Header Sticky -> Main Header Sticky option is ON
– Header Overlap & Transparent -> Header Overlap -> option is ON
– Single Page Builder -> Layout -> Full Width option is ON

You can see the Main Header overlaps single product page container content.

1) In order to address your concern, we recommend creating Multiple headers for specific pages on your website. Please follow the steps below:

1. Navigate to the ‘Theme Options’ on your website.
2. Proceed to the ‘Header Builder’ section.
3. From there, go to ‘Multiple Headers’.
4. In this section, you can create a new header for a single product page and set conditions to ‘Singular’ and ‘All products’. You can also create and edit as needed.

After creating the header, please follow these steps:

1. Edit the single product page header.
2. Go to ‘Header Sticky’ and select the ‘Main Header Sticky’ option.
3. Turn this option OFF.
4. Proceed to ‘Header Overlap & Transparent’, select ‘Header Overlap’ and turn this option OFF.
5. Publish your changes.

For your reference, we have attached a screenshot illustrating these steps.
https://imgur.com/vg4rO3C

https://imgur.com/p6rRcp1

We also recommend watching this instructional video about ‘Multiple Headers’: https://youtu.be/BpeXfzNwkOc

We hope these instructions will help you resolve your issue.

Regarding the remaining points, we will get to you shortly.

Best Regards,
8Theme’s Team.

#367966 Copied

Tony Rodriguez

Support staff

September 20, 2023 at 12:19

Hello, @ecommercedev,

2. When you scroll down the page you can see the Product Title jumping down a line.

We have identified the cause of your issue to be the activation of the Header Overlap feature. To rectify this, kindly deactivate the Header Overlap option by following these steps: Navigate to Xstore > Theme Options > Header Builder > Header Overlap.

As previously mentioned in our last correspondence, this should resolve the problem you are experiencing.

We trust this solution will be satisfactory.

Best Regards,
8Theme’s Team

#367996 Copied

Tony Rodriguez

Support staff

September 20, 2023 at 13:39

Hello, @ecommercedev,

4. I have turned ON ‘Stretch Add to Cart’ option. However you can see the ‘Add to cart’ button does not stretch from side to side on product page.

We have conducted a thorough review of your website’s single product page and found no issues. The ‘Add to Cart’ button appears to be functioning correctly and is properly stretched on your site. We believe the issue you are experiencing may be due to cache on your end.

We recommend that you clear your browser and plugin cache and then recheck the site.

Please refer to the attached image for further clarification.
https://imgur.com/twUTCAQ

Best Regards,
8Theme’s Team

#368011 Copied

ecommercedev

Participant

September 20, 2023 at 18:57

First of all thanks for your time you took to look into the issues and providing extensive reply!

Ad. 1)
I want the header to remain sticky using ‘smart’ Sticky Type. I just don’t want it to overlap on single product page. However, your solution should do just fine if I simply turn OFF ‘Header Overlap’ for single product page. Thanks alot!

Ad. 2)
This doesn’t seem to fix the issue. I am using Firefox 117.0.1. It doesn’t matter whether I view it on laptop screen or external desktop. It always shifts the header due to some (assuming) margin/width CSS style changes.
It works on chrome though. However if you pay close attention to product tabs you can see that the line underneath the titles of accordion also change width when you scroll. See attached screenshots.

Ad. 4)
I am not using any caching plugins. I am also viewing my page in clear new session using browser in incognito mode. I cannot get the resuts you see on neither chrome nor firefox. Is there any chance you can try another browser to see if you can reproduce my issue or I don’t know? I am out of ideas how to fix this one.

Please contact administrator
for this information.

#368043 Copied

Rose Tyler

Support staff

September 21, 2023 at 08:59

Hello, Ecommercedev,

Thank you for contacting us and for using XStore.

Please post different questions via separate topics to prevent a mess in conversation – https://www.8theme.com/forums/xstore-wordpress-support-forum/

Apologies for the confusion, but we seem to have misunderstood your request. Could you please rephrase it briefly and clearly once again?

Could you kindly specify the issues that need to be addressed and altered?

We would also appreciate it if you could provide us with access to the wp-admin.

To provide wp-admin access, create a new user account with administrator role via the Dashboard, and provide us with the username and password via the Private Content area.

Best Regards,
8Theme’s Team

#368101 Copied

ecommercedev

Participant

September 21, 2023 at 13:26

You are right. I will do that.

#368162 Copied

Rose Tyler

Support staff

September 21, 2023 at 13:42

Hello, Ecommercedev,

Thank you for understanding.

Best Regards,
8Theme’s Team

#368167 Copied

ecommercedev

Participant

September 23, 2023 at 10:12

NP.

#368305 Copied
Tagged: custom gallery layout, product page layout, support customization, woocommerce page customization, woocommerce templates, wordpress single product page, wordpress templates
Viewing 13 results - 1 through 13 (of 13 total)

The issue related to '‘Single Product Page – Support Gallery Layout Customization’' has been successfully resolved, and the topic is now closed for further responses

Single Product Page – Support Gallery Layout Customization

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection