Help with Adding Gallery Tab on Variable Product Page (XStore + Elementor)

This topic has 11 replies, 2 voices, and was last updated 3 months, 2 weeks ago ago by K.Sid

  • Avatar: K.Sid
    K.Sid
    Participant
    August 18, 2025 at 03:14

    Hi Support Team/Community,

    I’m working with XStore under Elementor and need help adding a Gallery tab on the single product page. The product type is variable, and what I’d like to achieve is:

    – Have a dedicated Gallery tab (alongside Description, Additional Info, Reviews, etc.). – I managed to add the Item “Gallery” Itself successfully.

    – Be able to add and display different sets of images for each product (not just variation thumbnails).

    – Could you please guide me on how to set this up (via theme settings, custom code, or Elementor widget)?

    Thanks in advance for your support!

    Files is visible for topic creator and
    support staff only.
    10 Answers
    Avatar: K.Sid
    K.Sid
    Participant
    August 18, 2025 at 03:33

    Additional Info

    Please contact administrator
    for this information.
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 18, 2025 at 10:01

    Hello, K.Sid,

    If you would like the tab content in the single product layout to be unique for each product, please follow the steps below:

    1. Navigate to the Elementor editor for the Single Product.
    2. Edit the Tab element and add a new tab.
    3. Make sure to select the “Single Product Custom Tab” option.
    4. Save your changes.
    5. Open the product you wish to edit and go to the “XStore Options” section.
    6. Navigate to the “Single Layout” tab, where you can select the Tab Title and Tab Content.

    If you prefer to build the tab content using Elementor, you will need to create a corresponding Static Block and insert it into the content using a shortcode.

    Please refer to the screenshots below for further details.

    Best regards,
    The 8Theme Team

    Files is visible for topic creator and
    support staff only.
    Avatar: K.Sid
    K.Sid
    Participant
    August 18, 2025 at 10:57

    Hello Andrew,

    Thanks for the detailed response, much appreciated esp. the screenshots. Based on which I’ve decided to go ahead with Option 1 and have followed your instructions.

    However, in doing so at:
    6. Navigate to the “Single Layout” tab, where you can select the Tab Title and Tab Content.

    There is no way for me to have a stylised gallery as provided on the Xstore URL below. This is a dealbreaker as I cannot stylize much if at all. I am unable to Live Paste it from the URL as that is one of the options.

    https://xstore.8theme.com/elementor/demos/minimal-fashion02/gallery-element/

    Would appreciate if you could guide me on how to achieve this?

    Thanks
    Kanwal

    Files is visible for topic creator and
    support staff only.
    Avatar: K.Sid
    K.Sid
    Participant
    August 19, 2025 at 00:11

    Hello Andrew,

    Just following up on this case – are you please able to provide an update? Thanks

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 19, 2025 at 10:39

    Hello,

    To add your desired content, please navigate to Static Blocks and create a new static block with the appropriate content. Once created, you may insert the shortcode of this block into the tab content area.

    Regarding the Live Paste functionality, please note that this issue is related to recent updates and code changes in Elementor, which currently impose certain limitations on this feature.

    As a workaround, we kindly ask you to download the necessary element files from the following link: https://fex.net/s/xykbsdm . After downloading, please use the Elementor editor to open a static block and import the templates to your website. Detailed instructions on how to do this can be found at: https://elementor.com/help/template-library/

    Should you have any further questions or require additional assistance, please do not hesitate to contact us and provide us with temporary wp-admin access.

    Warm Regards,
    The 8Theme Team

    Avatar: K.Sid
    K.Sid
    Participant
    August 20, 2025 at 03:43

    Hello Andrew,

    Thanks for reverting back. To be honest, I’m slightly confused as to what exact route to take. From what I understood, I’ve followed the steps below:

    1) Created a new Static Block called “Test Block”
    2) Downloaded the zip file provided in your link and imported the “gallery json” file to the test block via Elementor and saved it.
    3) Import was succesful, following which I deleted all other gallery elements from the static block and left “Gallery Masonry” intact as I wanted this layout.

    4) Went back to Test Product
    https://store.nerdbit.nz/product/a1-bookcase-medium/

    Under X-store Options Section
    Custom tab title : Showcase
    Custom tab: [block id=”1626″]

    Saved and hit preview.

    When viewing the webpage, Showcase Tab does show the gallery BUT its all messed up.

    Please find attached screenshot relevant to what I’ve described.

    Also, there is temporary administrator account provided for your use.

    I look forward to your response as on quite a time crunch here.

    Please contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 20, 2025 at 09:44

    Hello, K.Sid,

    We have resolved the issue related to the initialization of Masonry within tabs.

    To address this, we have added the following code snippet:
    “Reinitialize Masonry inside tabs”

    add_action( 'wp_enqueue_scripts', function() {
        $custom_js ="
    		jQuery(document).ready(function($){
    			$('.single-product .et-woocommerce-tab').on('click', function(){
    				$(document).trigger('resize');
    			});
    		});";
    
        wp_add_inline_script( 'jquery', $custom_js );
    });

    Best regards,
    The 8Theme Team

    Avatar: K.Sid
    K.Sid
    Participant
    August 20, 2025 at 10:25

    could you please specify where exactly has that code been implemented?

    1) Also, would i need to implement the code for every product?
    2) Can i change the gallery style from masonry to anything else without any issues?

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 20, 2025 at 11:42

    1) This code applies globally to all products, so there is no need for you to add anything further.
    2) Yes, you may proceed.

    Best regards,
    The 8Theme Team

    Avatar: K.Sid
    K.Sid
    Participant
    August 22, 2025 at 01:12

    Thanks for the support! My topic “Help with Adding Gallery Tab on Variable Product Page (XStore + Elementor)” has been successfully resolved.

  • Viewing 11 results - 1 through 11 (of 11 total)

The issue related to '‘Help with Adding Gallery Tab on Variable Product Page (XStore + Elementor)’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.