Some Customize Options for Product Page - by kmc

This topic has 18 replies, 2 voices, and was last updated 1 weeks, 5 days ago ago by Luca Rossi

  • Avatar: kmc
    kmc
    Participant
    April 26, 2025 at 16:50

    Please see the attached image:

    1. For variable products with different options, when the option is chosen, it shows another pice below the options, not changing the main price, can we set it to change the main price on top.
    2. How to remove the “clear” word?
    3. How to remove the “stock” word?

    Files is visible for topic creator and
    support staff only.
    17 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    April 28, 2025 at 09:45

    Hi @kmc,

    1. Please add this code under functions.php file locates in your child theme:

    
    add_action('wp_footer', '_n2t_wp_footer');
    function _n2t_wp_footer(){
        if(is_singular('product')){
            ?>
            <script>
                // Custom script to handle pricing display
                jQuery(document).ready(function($) {
                    var originalPrice = $('.single-product .elementor-widget-woocommerce-product-etheme_price .price').html(); // Store the original price
    
                    // Update price when a variation is selected
                    $('form.variations_form').on('woocommerce_variation_has_changed', function() {
                        var selectedPrice = $('.woocommerce-variation-price .price').html();
                        if (selectedPrice) {
                            $('.single-product .elementor-widget-woocommerce-product-etheme_price .price').html(selectedPrice);
                        }
                    });
    
                    // Reset price when variations are cleared
                    $('form.variations_form').on('reset_data', function() {
                        $('.single-product .elementor-widget-woocommerce-product-etheme_price .price').html(originalPrice);
                    });
                });
            </script>
            <?php
        }
    }
    

    2. & 3. Please add the following CSS codes under XStore > Theme Options > Theme Custom CSS > Global CSS:

    
    .elementor-widget-woocommerce-product-etheme_add_to_cart.vertical-variations form.cart table.variations a.reset_variations,
    .single-product .cart .stock {
         display: none;
    }
    
    

    Hope it helps!

    Avatar: kmc
    kmc
    Participant
    April 29, 2025 at 13:03

    Thank you for this, I see another issue, the images from 2nd image onwards are not showing up on product page, why is this?

    Please contact administrator
    for this information.
    Avatar: Justin
    Luca Rossi
    Support staff
    April 30, 2025 at 09:47

    Dear @kmc,

    We hope this message finds you well.

    In order to review and verify your current settings, we kindly request temporary access to your WordPress admin panel.

    To grant us access, please create a new user account with Administrator privileges via your WordPress Dashboard. Once the account has been created, you may securely share the login credentials with us through the Private Content section provided for this purpose.

    Thank you for your cooperation and support.

    Best regards,
    The 8Theme Team

    Avatar: kmc
    kmc
    Participant
    April 30, 2025 at 10:51

    Thanks, please See attached

    Please contact administrator
    for this information.
    Avatar: Justin
    Luca Rossi
    Support staff
    May 1, 2025 at 12:00

    Dear @kmc,

    We believe the issue may have been caused by a conflict between the LiteSpeed Cache and Elementor plugins.

    To address this, we navigated to the Elementor settings and modified the CSS Print Method to “Internal Embedding,” as shown in the screenshot below:

    https://prnt.sc/HgYE6L9NQhgd

    Following this adjustment, everything appears to be functioning correctly.

    Could you please check on your end and confirm?

    Best regards,
    The 8Theme Team

    Avatar: kmc
    kmc
    Participant
    May 2, 2025 at 16:48

    Hi, Here is the feedback

    – if I change the sliding option to fade it works fine, but if it is “slide” it still cannot display anything from 2nd picture.
    – Just found another issue, the thumbnails only can display 3 images, if I click the arrow to display 4th thumbnail slider image, it is blank.

    Please contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    May 2, 2025 at 17:24

    Dear @kmc,

    We kindly ask you to completely disable all third-party plugins that are not included with XStore. You can find the list of officially supported plugins here: https://www.8theme.com/documentation/xstore/plugins/included-plugins/.

    Once you have disabled the non-included plugins, please clear your browser’s cache and check the issue again. It is possible that one of the additional plugins may be causing the problem.

    Please let us know the outcome after performing these steps.

    Best regards,
    The 8Theme Team

    Avatar: kmc
    kmc
    Participant
    May 2, 2025 at 18:26

    I have already tried your method to deactivate all non-core plugins and still have the same issue.

    Avatar: Justin
    Luca Rossi
    Support staff
    May 5, 2025 at 08:50

    Dear @kmc,

    We kindly ask you to check again at your earliest convenience.

    It appears that updating the Elementor and Pro Elements plugins to their latest versions has resolved the errors.

    Best regards,
    The 8Theme Team

    Avatar: kmc
    kmc
    Participant
    May 14, 2025 at 13:23

    All fixed, I have another 2 questions.

    1. For the Marquee on header (mobile version), I find the space between the icon and the text is too far so the Marquee doesn’t seem continous. (see image) Can you advise why?

    2. For the Instagram element, when I un-select “Without spacing”, the space is very big, can I adjust it to be smaller say 2px?

    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    May 15, 2025 at 06:35

    Dear @kmc,

    We hope this message finds you well.

    1. Regarding the marquee, kindly add the following custom CSS code to center the content:

    
    body .etheme-marquee-content {
        justify-content: center;
    }
    

    2. For the Instagram element, we would appreciate it if you could provide us with some screenshots to help us better understand the issue.

    Thank you for your cooperation.

    Best regards,
    The 8Theme Team

    Avatar: kmc
    kmc
    Participant
    May 15, 2025 at 17:40

    1. still not working, space between each marquee too wide, see image attached.

    2. see images attached.

    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    May 16, 2025 at 08:34

    Dear @kmc,

    We hope this message finds you well.

    1. We have implemented the following custom CSS code: https://prnt.sc/71Qtjt1zESWh. Could you kindly review it at your earliest convenience?

    2. Additionally, we have added this custom CSS code: https://prnt.sc/V289nXM0IqiV to apply a 4px spacing around each Instagram image. We would appreciate it if you could also verify this update.

    Thank you for your time and support.

    Best regards,
    The 8Theme Team

    Avatar: kmc
    kmc
    Participant
    May 21, 2025 at 12:30

    This code doesn’t work for products with variations.

    For example, see below screenshots:

    Image 1: the small price should not be displayed when I first open the page

    Image 2: when I select 1.6m, the price should be 1750 while it shows 2400, and the small price should disapear.

    Image 3: when I select 1.8m, the price should be 2050 while it shows 1750, and the small price should disapear.

    Content is visible for topic creator and
    support staff only.
    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    May 22, 2025 at 07:34

    Dear @kmc,

    We’ve updated the custom codes to this:

    
    add_action('wp_footer', '_n2t_wp_footer');
    function _n2t_wp_footer(){
        if(is_singular('product')){
            ?>
            <script>
                // Custom script to handle pricing display
                jQuery(document).ready(function($) {
                    var originalPrice = $('.single-product .elementor-widget-woocommerce-product-etheme_price .price').html(); // Store the original price
    
                    // Update price when a variation is selected
                    $('.single_variation_wrap').on('show_variation', function() {
                        var selectedPrice = $(this).find('.woocommerce-variation-price .price').html();
                        if (selectedPrice) {
                            $('.single-product .elementor-widget-woocommerce-product-etheme_price .price').html(selectedPrice);
                        }
                    });
    
                    // Reset price when variations are cleared
                    $('form.variations_form').on('reset_data', function() {
                        $('.single-product .elementor-widget-woocommerce-product-etheme_price .price').html(originalPrice);
                    });
                });
            </script>
            <?php
        }
    }
    

    And now the price is showing correctly. Could you please have a look?

    Thank you!

    Avatar: kmc
    kmc
    Participant
    May 22, 2025 at 09:23

    Thank you for your quick reply.

    Now the price is correct but two other issues again:

    1. the price should only appear on top, now we see the small prices appear also (there are two same prices displayed)

    2. The “clear” word should be hided as we requested earlier.

    Avatar: Justin
    Luca Rossi
    Support staff
    May 22, 2025 at 10:15

    Dear @kmc,

    We hope this message finds you well.

    We would like to inform you that we have made some minor updates to the custom CSS code. The layout now appears to be displaying correctly, as shown in the screenshot below:

    https://prnt.sc/rgKhmxaXZXzo

    Additionally, we are currently not seeing the “Clear” button on our end.

    Could you kindly review the changes on your side and let us know if the issue persists?

    Thank you for your attention to this matter.

    Best regards,
    The 8Theme Team

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

You must be logged in to reply to this topic.Log in/Sign up

Helpful Topics

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