Questions on theme single product builder (V9.3)

This topic has 13 replies, 2 voices, and was last updated 2 weeks ago ago by Tony Rodriguez

  • Avatar: azicard
    azicard
    Participant
    May 15, 2024 at 19:12

    Good day,

    Can you please let me know how to do the following when using the theme single product builder

    1) Reduce the space around “Brand”. Right now, there is too much space both above and below.

    2) List SKU on its own and reduce the front size. SKU is currently grouped in with product meta and I want to be able to place right below the product title. And there is no way to change the size of the SKU.

    3) Bold the text “ADD TO CART”. The current colour looks a bit washed out.

    4) Apply different templates to different products. I created two templates and want to use one template for certain products and the other template for the rest of the products.

    5) Remove the brand in the Related Products section and change the font size of the product title, product ski and price.

    Thank you.

    12 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 16, 2024 at 09:12

    Hello, @azicard,

    Thank you for choosing XStore as your WooCommerce WordPress theme.

    1/ To solve your issue please add the next custom CSS code in XStore > Theme options > Theme custom CS > Global CSS.

    span.flex.flex-wrap.align-items-center {
        height: 0px !important;
    }
    
    .product_meta .product_brand{
            margin-bottom: 0px !important;
          height: 50px !important;
    }

    The result should look like this: https://imgur.com/msq1Y4P

    3/ To make bold the text “ADD TO CART, Please add the next custom CSS code in XStore > Theme options > Theme custom CS > Global CSS.

     .single-product-builder .single_add_to_cart_button, .single-product-builder .single_add_to_cart_button.button{
                 font-weight: bold !important;
    }

    B/ We would like to guide you through the process of changing the color of the “Add to Cart” button on the single product page of your website.

    Please follow these steps:
    1. Navigate to the “XStore” section.
    2. Select “Theme Options.”
    3. Go to “WooCommerce.”
    4. Choose “Single Product Builder.”
    5. Click on “Add to Cart.”

    For your convenience, we have provided a visual reference which you can view by following this link: (https://imgur.com/jNgfirb).

    4/ Please read our theme documentation here: https://xstore.helpscoutdocs.com/article/190-xstore-single-product-builder-with-elementor

    Add Conditions: By clicking the “Add Condition” button, users can specify parameters under which the template will be displayed. From various available conditions, users can select the ones that best match their requirements. Once the conditions are configured, clicking “Save & Close” applies them.

    5/ To solve your issue please add the next custom CSS code in XStore > Theme options > Theme custom CS > Global CSS.

    .related-products-wrapper .products-page-brands {
        display: none !important;
    }
    
    .content-product .product-title , .sku_wrapper , .price {
        font-size: 15px !important;
    }

    The result should look like this: https://imgur.com/yyB41f6

    We hope this helps. Should you require any further assistance, please do not hesitate to reach out. We are here to help.

    Best Regards,
    8Theme’s Team

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 16, 2024 at 09:41

    Hello, @azicard,

    2) List SKU on its own and reduce the front size. SKU is currently grouped in with product meta and I want to be able to place right below the product title. And there is no way to change the size of the SKU.

    2/ To solve your issue, Please add the next custom code that must be placed under the functions.php file located in child theme:

    add_action('wp_footer', '__wp_footer');
    function __wp_footer(){
        ?>
        <script>
            (function ( $ ) {
                'use strict';
                $(document).ready(function (){
                    $('.et_product-block > .product_meta > .sku_wrapper').insertAfter($('h1.product_title.entry-title'));
                });
            })( window.jQuery );
        </script>
        <?php
    }

    We hope this helps. Should you require any further assistance, please do not hesitate to reach out. We are here to help.

    Best Regards,
    8Theme’s Team

    Avatar: azicard
    azicard
    Participant
    May 17, 2024 at 21:38

    Hello,

    Thank you for the short code. They worked beautifully.

    However, I noticed a coupe more issues:

    1) I wasn’t able to add a border around a section. I enabled the border and changed the colour, but it still didn’t show.

    2) There is a shopping bag icon showing in the “Add to Cart” button which doesn’t match with the options listed under Styles. And I would like to remove the icon from the button.

    Also I would like to add the following line in blue above the product title:

    Shop all

    The is a link so if I click on , it will show all the products in that brand.

    Can you please provide the code for doing that?

    Thank you!

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 18, 2024 at 08:47

    Hello, @azicard,

    Thank you for your response.

    1/ To assist you more effectively with the issue you are experiencing, could you kindly provide the URL of the page with the screenshots where the problem is occurring? Your cooperation will enable us to examine your settings closely and provide the necessary support.

    2/ To remove the Bag Icon from the “Add to Cart” Button in the Single Product Page, Please add the following css code in the Xstore> Theme Options> Theme Custom Css > Global Css.

    .et_cart-type-1 .single_add_to_cart_button:before {
        content: none !important;
    }

    The result should look like this: https://paste.pics/edit/QYHJT

    3/ We are writing to inform you that your recent request was not entirely clear to us. To better understand and address your concerns, could you please provide a more detailed description of the issue? Additionally, if possible, include a screenshot or video that illustrates your problem or outlines your desired outcome. This information will greatly assist us in investigating the matter thoroughly and offering you the most effective support.

    Thank you for your cooperation and we look forward to hearing from you soon.

    Best regards,
    The 8Theme Team

    Avatar: azicard
    azicard
    Participant
    May 18, 2024 at 13:15

    Good day,

    Thank you for providing the CSS code.

    For issue 1), please see the attached screenshot1.png. As you can see, I set the border style to be solid and colour to be black and clicked on save, but the border doesn’t show.

    For my question, please see the attached Screenshot2.png. I would like to add a line above the product title in blue which is a link to list all the products in the brand.

    Thank you.

    Files is visible for topic creator and
    support staff only.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 18, 2024 at 13:51

    Hello, @azicard,

    1/ We are pleased to inform you that the issue you reported has been successfully resolved. We have implemented border values and saved the settings accordingly.

    For your reference, we have attached images that illustrate the adjustments made. We hope you find these changes satisfactory.

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

    Best Regards,
    The 8Theme Team

    Please contact administrator
    for this information.
    Avatar: azicard
    azicard
    Participant
    May 18, 2024 at 14:58

    Good day,

    Thank you for fixing the issue!

    However, I noticed there is no way to adjust the thickness of the border as well as to change the look of the corners. How do I make the border much thinner and corners round? Please see the attached screenshot for an example.

    Also just wonder if you will be able to provide the code for my second question? I’ve attached the screenshot again.

    Thank you!

    BTW, can you please provide instructions on uploading a file to the private content area? I tried to drag and drop but that didn’t work.

    Files is visible for topic creator and
    support staff only.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 20, 2024 at 06:08

    Hello, @azicard,

    1/ We are pleased to inform you that the issue you reported has been successfully resolved. Our team has adjusted the border radius value and border settings as per your requirements.

    For your reference, we have uploaded images illustrating the adjustments in the private content area. Please review them at your earliest convenience.

    2/ We are writing to provide you with an updated code snippet that will position the brand name above the product title on your website.

    Please find the new code below:

    add_action('wp_footer', '__wp_footer');
    function __wp_footer(){
        ?>
        <script>
            (function ( $ ) {
                'use strict';
                $(document).ready(function (){
                    $('.et_product-block > .product_meta > .sku_wrapper').insertAfter($('h1.product_title.entry-title'));
                    $('.et_product-block > .product_meta > .product_brand').insertBefore($('h1.product_title.entry-title'));
                });
            })( window.jQuery );
        </script>
        <?php
    }

    We recommend updating the previous code with this new version to ensure optimal functionality.

    it will look like this: https://paste.pics/QYTFB

    we just move the brand logo + link to above the product title.

    To edit the same as the screenshot, You need the additional code customization codes.

    We hope this helps.

    3/ Please be advised that the private content area does not support the drag-and-drop functionality for files. It is designed exclusively for text entries. Should you need to include files in the private content area, we kindly ask that you upload them to a file-sharing service, such as WeTransfer (https://wetransfer.com/). Once uploaded, you may paste the link to the file in the private content area.

    Additionally, BE ATTENTIVE and don’t place the private information in the general message area because all the visitors have access to that information, please use the Private Content area.

    We trust this information is helpful to you. Should you have any further inquiries or require assistance, please do not hesitate to contact us.

    Best Regards,
    The 8Theme Team

    Avatar: azicard
    azicard
    Participant
    May 21, 2024 at 00:14

    Good day,

    Thank you for resolving issue 1. I’m now able to adjust the spacing around the border as well as the thickness.

    As for 2, if it’s not too much trouble, can you please provide the code for the requested look (ie “Shop all “) and leave also the brand where it was?

    Thank you again for your help!

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 21, 2024 at 05:50

    Hello, @azicard,

    To address the issue you are experiencing, please insert the following code into the functions.php file of your child theme and verify if the problem persists:

    function n2t_text_strings($translated_text, $text, $domain) {
        switch ($translated_text) {
            case 'Brand: ':
                $translated_text = 'Shop all: ';
                break;
        }
        return $translated_text;
    }
    add_filter('gettext', 'n2t_text_strings', 20, 3);

    We trust that this adjustment will resolve the issue.

    Should you require further code customization, our team of expert developers is ready to assist you with bespoke solutions. For a detailed estimate and to discuss your specific requirements, please submit a request for customization services through the following link: [8Theme’s Customization Services](https://www.8theme.com/account/#etheme_customization_panel).

    We appreciate your understanding and are here to support you with any additional questions or needs you may have.

    Kind regards,
    The 8Theme Team

    Please contact administrator
    for this information.
    Avatar: azicard
    azicard
    Participant
    May 30, 2024 at 18:57

    Good day,

    Thank you for all your help.

    I don’t have any other questions.

    Please close this thread.

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 31, 2024 at 05:20

    Hello, @azicard,

    You are welcome.

    Choosing our theme reflects your commitment to quality, and for that, we’re genuinely grateful. As we constantly strive to elevate your experience, your feedback is an invaluable gift. Could you kindly take a moment to rate our product with 5 stars on ThemeForest?

    Click here to share your insights: https://themeforest.net/downloads

    Your support fuels our journey, and we appreciate it more than words can express.

    Best Regards,
    The 8Theme Team

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

The issue related to '‘Questions on theme single product builder (V9.3)’' 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.