Return to previous page

Stock label tweaks & Brand label/picture tweaks

This topic has 12 replies, 3 voices, and was last updated 2 months, 4 weeks ago ago by Andrew Mitchell

Mathew

Participant

February 13, 2024 at 13:52

Hi,

I was asked to do some changes to the ‘Stock labels’ as well as to how the ‘Brand names’ are shown.

1) How can I change the actual text on the stock labels such as ‘Out of Stock’ and ‘Available for backorder’ into something custom? Is it also possible to change the chosen icon and the text color?
This question goes for both the labels in the products grid as well as those on a single product page.

2) Is it possible in the products grid to change:
– brand name size & color
– brand name position (I’d like to place it ABOVE the product name rather than just under it).

3) On a single product page, I’m showing the brand name as picture.
– is it possible to make this picture bigger than it does standard?
– is it possible to also show the brand name in a different location: preferably just above the product name. This means showing the brand twice (once as picture, once as name)

Many thanks!

Please, contact administrator
for this information.

#383253 Copied Theme version: 9.2.8

11 Answers
Tony Rodriguez

Support staff

February 14, 2024 at 09:06
Hello, @Mathew,

Thank you for contacting us and for using XStore.

1/ “Out of stock” text comes from WooCommerce plugin. You can contact WC support to get assistance with it, or use translation files to change the text: install Loco translate plugin, go to Loco translate > plugins > woocommerce > edit English translation > Save changes, then you can disable the Loco plugin. For example – http://prntscr.com/qma5vl > http://prntscr.com/qma5zj

2/ We kindly request that you provide us with the URL of the web page where you wish to modify the size and color of the brand name, as well as adjust its position. This information is essential for us to accurately assess the changes required and to furnish you with the appropriate custom CSS code to address your needs.

We appreciate your cooperation and look forward to assisting you promptly.

3/ A/ We understand that you wish to modify the size of the brand image on the single product page to be larger than the default setting. To achieve this, please follow the steps outlined below:

1. Navigate to the “XStore” section in your website’s admin panel.
2. Proceed to “Theme Options”.
3. Click on “Theme Custom CSS”.
4. Select the “Global CSS” tab.

Once there, kindly copy and paste the following CSS code:
```
.single-product span.product_brand img {
    max-height: 140px !important;
    max-width: 240px !important;
}
```
This adjustment will result in a brand image that resembles the example provided in the following link: https://imgur.com/0a3981T

Please note that you have the flexibility to alter the max-height and max-width values in the code to suit your specific requirements.

3/ B/ We regret to inform you that it is not feasible to display the brand twice. However, we invite you to submit your request on our Taskboard at https://www.8theme.com/taskboard/. Should your suggestion garner sufficient support from our customer community, our development team will take it into consideration for potential inclusion in a future update.

Thank you for your understanding. If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Best Regards,
The 8Theme Team
#383319 Copied
Mathew

Participant

February 14, 2024 at 09:45

Hi Tony,

Thanks for the help!

1) Ok, I’ll look into what’s possible this way, thanks for the info.

2) I meant on any product grid showing anywhere. Currently under the picture it shows the product name first and then the brand name just under it (in a lighter grey color). If possible, I’d like to have the brand name first in a slightly bigger size and/or darker color, with the product name as it is now under it. See private for example info.

3A) Thanks, the picture now shows bigger!
However, it seems you have changed the position of this picture: I had it in Product Meta, displaying above the Product Gallery. Now it shows between price and short description?
EDIT: I’ve found how to put it back, had to specify under Brands again that it shows in Product Meta, all good now!

3B) Thanks, I understand, that’s fine 🙂

Thanks again for your great support!

Please contact administrator
for this information.

#383322 Copied
Tony Rodriguez

Support staff

February 14, 2024 at 12:33
Hello, @Mathew,

1/ Sure, Take your time.

2/ In order to address your concern, we kindly ask that you follow these steps: copy the CSS code provided below and paste it into the following location within your XStore theme: Theme Options > Theme Custom CSS > Global CSS. This should resolve the issue you are experiencing. The result should look like this: https://pasteboard.co/Hzb4d9qYIZuR.png
```
.product-details {
    display: flex;
    flex-direction: column;
}
.product-details .products-page-brands {
    order: 1;
}
.product-details .product-title {
    order: 2;
}
.products-grid .product-excerpt{
    order: 3;
}
.content-product .button{
    order: 4;
}
.content-product .products-page-brands a.view-products {
    color: #000 !important;
}
```
3/A/ & B/ You’re welcome! If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Have a great day! Should you require any further assistance, please do not hesitate to reach out.

Best regards,
The 8Theme Team
#383341 Copied
Mathew

Participant

February 14, 2024 at 12:45

Hi Tony,

Thanks again!

2) That code works, but it has 2 unwanted consequences:
– on products with a price (only for some products we show price, see link in private area), this price is now displayed as first instead of being under the Product Name.
– the ‘Read More’ (or alternatively ‘Add to Cart’) button on the product grid now shows as full column width instead of it’s original size.

Can these things be fixed with an updated version of your code above?

All the best!

Please contact administrator
for this information.

#383342 Copied
Tony Rodriguez

Support staff

February 15, 2024 at 05:47
Hello, @Mathew,

We are delighted to inform you that we have successfully resolved the outstanding issues on your website by making slight modifications to the Custom CSS we provided earlier. For your convenience, we have included the updated CSS below. Additionally, we kindly ask you to review the changes on your site after clearing your browser’s cache. Please refer to the following screenshot for further clarification: https://ibb.co/4KVHhS6.
```
.product-details {
    display: flex;
    flex-direction: column;
}
.product-details .products-page-brands {
    order: 1;
}
.product-details .product-title {
    order: 2;
}
.content-product .price {
    order: 3;
}
.products-grid .product-excerpt {
    order: 4;
}
.content-product .button {
    order: 5;
}
.content-product .products-page-brands a.view-products {
    color: #678ca5 !important;
}
.content-product .product-details .button {
    max-width: max-content !IMPORTANT;
    margin: auto !important;
}
```
Should you have any further questions or require additional assistance, please do not hesitate to contact us.

Warm regards,
The 8Theme Team
#383415 Copied
Mathew

Participant

February 15, 2024 at 11:47

Hi Tony,

Many thanks again, all good now with that code!

I’ve also played around with Loco Translate, does indeed what I need to change ‘Out of stock’ and ‘Available on backorder’ into custom text!

One final related question to this:
The ‘Out of stock’ and ‘Available for backorder’ text fields show in a box on the product grid picture: Is it possible to change the font size of these and/or the position/size of this box (moving it up or down, making it slightly wider maybe)?
Since i’d like to use a longer text, it would otherwise block the whole picture 🙂

Thanks!

#383482 Copied
Tony Rodriguez

Support staff

February 15, 2024 at 13:11
Hello, @Mathew,

We appreciate your prompt reply regarding the issue you have encountered.

To address your concern, we kindly ask that you follow these steps:

1. Copy the CSS code provided below.
2. Navigate to the “Xstore” section.
3. Proceed to “Theme Options”.
4. Select “Theme Custom CSS”.
5. Paste the copied code into the “Global CSS” field.
```
.content-product p.stock.out-of-stock {
    font-size: 15px !important;
    width: 100% !important;
    top: 10% !important;
}
```
The result should look like this: https://ibb.co/ct4fJmy

Should you require any further assistance, please do not hesitate to reach out to us.

Best regards,
The 8Theme Team
#383495 Copied
Mathew

Participant

February 15, 2024 at 13:36

Hi Tony,

Great, thanks for the very fast and perfect solution! I can tweak around with that to perfection 🙂

Can you let me know what the object name is for the ‘On backorder’ version of this box?
I tried your code but then with ‘p.stock.on-backorder’, but that seems to be the wrong name 🙂
EDIT: found it, its ‘p.stock.available-on-backorder’

Is the icon used (exclamation mark on ‘Out of stock’ and check mark on ‘Available for backorder’) part of the XStore Theme or is it part of Woo?
If this can be accessed somehow, would be great!

Best

#383498 Copied
Tony Rodriguez

Support staff

February 16, 2024 at 05:51
Hello, @Mathew,

Thank you for your response.

We are pleased to hear that the solution we provided has successfully met your requirements.

Regarding the remaining issue you mentioned, the exclamation mark indicating ‘Out of Stock’ and the check mark signifying ‘Available for Backorder’ are currently implemented using icons.

Should you wish to replace these with alternative icons from Font Awesome, you may do so by applying Custom CSS.

To proceed, please insert the following CSS code into your website’s theme settings by navigating to Xstore >> Theme Options >> Theme Custom CSS >> Global CSS. Once there, you are free to modify the icon codes within the Custom CSS to suit your preferences:
```
p.stock.available-on-backorder:before {
    content: '\e918' !important;
}
p.stock.out-of-stock:before {
    content: '\e900' !important;
}
```
Should you require any further assistance or have additional questions, please do not hesitate to reach out.

Best regards,
The 8Theme Team
#383551 Copied
Mathew

Participant

February 16, 2024 at 10:37

Many thanks again, your support is truly the best!

#383570 Copied

Andrew Mitchell

Support staff

February 16, 2024 at 10:37

Dear Mathew,

As we continue our mission to exceed expectations, your insights become increasingly valuable. Could we, with all due respect, request your thoughtful feedback by giving our theme a deserved 5-star rating on ThemeForest?

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

Your time and trust are highly appreciated!

Best Regards,
The 8Theme Team

#383571 Copied
Tagged: brand picture edits woocommerce, customize woocommerce labels, improve woocommerce product labels, personalize woocommerce branding, stock label adjustments wordpress, wordpress label tweaks
Viewing 12 results - 1 through 12 (of 12 total)

The issue related to '‘Stock label tweaks & Brand label/picture tweaks’' has been successfully resolved, and the topic is now closed for further responses

Stock label tweaks & Brand label/picture tweaks

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection