Return to previous page

Questions on theme single product builder (V9.3)

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

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.

#395352 Copied Theme version: 9.3

12 Answers
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://www.8theme.com/documentation/xstore/xstore-builders/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
#395426 Copied
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
#395430 Copied
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!

#395700 Copied
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
#395735 Copied
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.

#395778 Copied

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.

#395783 Copied

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.

#395794 Copied
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
#395898 Copied
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!

#396031 Copied
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.
#396044 Copied
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.

#397429 Copied

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

#397452 Copied
Tagged: product builder guide, single product builder, theme questions, v9.3 update, woocommerce customization, wordpress theme help, wordpress woocommerce themes
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

Questions on theme single product builder (V9.3)

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection