Return to previous page

Product Page Edits – Colors, Icons, Buttons

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

TFS

Participant

September 20, 2022 at 01:12

Hello,

I need some help in regards to edits and color changes on the product pages.

Demo; https://xstore.8theme.com/elementor/demos/niche-market02/product/wooden-classical-golden-chairs/

1) Can I edit the color of the amount (money) that shows up?
a) The color of the money amount is Gray
b) When I put the item on sale, the color becomes yellow

I want to change the color of these two.

2) Can I add a symbol or text before of after the dollar amount to tell the customer what the currency is? Such as adding USD or CAD etc.

3) Can I change the color of the stars that shows up on the reviews? The default is yellow.

4) Can I edit the icons on the share section, it has 8 icons right now.

5) Can I change the color of the text which shows how many items are in stock?

6) For the add to cart button, can I change the icon, color, and hover color?

7) For the buy now button can I change the icon and the color of the bar?

Thanks for your continuous help!

#334518 Copied Theme version: 8.3.4

5 Answers
Tony Rodriguez

Support staff

September 20, 2022 at 07:38
Hello, @TFS,

1.. Yes you can change the color using custom CSS code in the XSTORE >> Theme Options >> Theme Custom CSS >> Global CSS now paste the below code at the bottom of the CSS box.
```
a) .single-product .et_product-block>.price{color:black !important;}
b) .single-product .et_product-block>.price ins .amount {color: black !important;}
```
Note: In the above code the word “black” is the color and you can change it with the color you want.

2) No, Sorry to say, that there are no options because the currency of the store is set from the WooCommerce plugin’s settings and you will be able to set only the type of currency then the logo of the currency will appear by default. Change requires customization.

Furthermore, I have found an article to know how you can add it via customization kindly read the article and follow the steps in order to solve your issue: https://www.cloudways.com/blog/add-custom-currency-symbol-in-woocommerce/

3) To change the color of the star’s ratings navigate to the Dashboard >> XSTORE >> Theme Options >> Theme Custom CSS >> Global CSS then paste the below code at the bottom of the CSS box.

.star-rating span:before{color:red !important;}

Then save settings. Please note that the word “red” in the above code is the color and you can change it with the color you want.

4) Navigate to the Dashboard >> XSTORE >> Theme Options >> WooCommerce >> Single Product Builder >> Sharing and then enable or disable the icon you want. Check the image: https://postimg.cc/F1THYwxq

5) To change the color of the stock items notice navigate to the Dashboard >> XSTORE >> Theme Options >> Theme Custom CSS >> Global CSS then paste the below code at the bottom of the CSS box.

.stock.step-1{color:red !important;}

Then save settings. Please note that the word “red” in the above code is the color and you can change it with the color you want.

6) You can change the background color and hover color of the button by going in to to the XSTORE >> Theme Options >> WooCommerce >> Single Product Builder >> Add to Cart & Quantity check the image: https://postimg.cc/zy168Gg1

7) In the same option “XSTORE >> Theme Options >> WooCommerce >> Single Product Builder >> Add to Cart & Quantity” you can change the color of the buy now button: https://postimg.cc/XXjwSSJD

Note: To change the icon into the add to cart and buy now button. You can add the below custom CSS code in the theme options >> theme custom CSS >> global. Like this: https://postimg.cc/4K15CpDr below is the code that I show you in the picture.
```
.single_add_to_cart_button:before {
    content: "\f07a" !important;
    font-family: "FontAwesome" !important;
}
```
And here is the link for the icon: https://fontawesome.com/icons/cart-shopping?s=solid&f=classic

Regards 8Themes Team.
#334545 Copied
TFS

Participant

September 22, 2022 at 02:41

Hello Tony,

Thanks for your replies, I hope I am not bothering you.

1) I want to make the color a custom color, the code is; #D40000
All the products will be a “sale price” so I want to make the sale color red and the crossed out color black. Is this possible?

Also when I add the code and click publish the changes are not appearing on the website?

2) Thanks for the article! I just want to make sure that this does not affect the actual process of the currency and website? Or is the actual money process not done on WooCommerce and is done on 3rd party plugins such as PayPal, Stripe, and other payment gateways?

Meaning If I make a currency called “CAD$” this will not affect anything and that the website will actually charge customers in Canadian Dollars (The website is in Canada)

3) Thank you! This worked.
However I also want to tell you I found a place on the XStore editor located in; Shop – Products Style, and then you see; STAR RATING COLOR. I change this to the color and it changes when I am on the screen. But when I exit that screen the color changes back to the default.

I am not sure why that is happening?

4) Thanks! However the same problem is happening.
When I choose a different color for the icons (Black), it is randomly grey.
The change shows up when I have the editing screen open but closes when I exit the editing window.

Do I have to download a CACHE Plugin or something?

5) Thanks it worked.
Can I also edit the icon before the text? It is currently a check mark.
Can I also make it In Stock (have the words start with a capital letter?)

6) & 7)

Thanks! I did this but the same issue, The changes are not showing once I exit the screen.

I am not sure why this has been happening. But nothing is Saving onto the actual website.

Can I also change the text to Capital letters? And how can I find an icon for a shopping bag. I want to add it to the “Add To Cart” button.

Thanks!

#334679 Copied

Tony Rodriguez

Support staff

September 22, 2022 at 06:12

Hello, @TFS,

Alright, please share your site wp-admin URL and access in the private content area of this topic by following the below-given format

WORDPRESS ADMIN URL:
WORDPRESS ADMIN USERNAME:
WORDPRESS ADMIN PASSWORD:

So that I will check and fix your issue on your site.

Note: Please take a complete backup of your site first and allow us to debug your site and change/remove the plugins to solve your issues.

Regards 8Themes Team.

#334691 Copied

TFS

Participant

September 23, 2022 at 05:13

Hello Tony,

1) I got this to work. I added the code you provided together and it worked.

2) I found out another plugin for this issue.

However I am still curious in whether if I added a custom currency, how will the website be charged? Does this part of WooCommerce decide this or will the payment gateways/plugins do this in their setting?

3) I got this to work. Not sure why the changes did not show up immediately, maybe it takes time for the changes to show?

4) I got this to work as well.

5) Got the color to change! However can I change the text? from “in stock” to something else? Is there custom code in which I can add for this?

6) & 7) I got the colors to change! I am not sure why when I came back after hours the changes were showing.

However how can I change the text that is appearing?
Also would like to edit the icons of the add to cart button? I would want to change it to a shopping bag and have the cart on the “buy now” button.

Thanks!

#334827 Copied

Tony Rodriguez

Support staff

September 24, 2022 at 06:49

Hello, @TFS,

1. Sound’s Good!!

2. Actually, It has been decided by WooCommerce, as WooCommerce provides the complete store functionality. So it’s better to contact WooCommerce support on this.

3. It might be the cache issue at that time. Well, Sound’s Good!! that it has been resolved now.

4. Sound’s Good!!

5. Please refer to this article: https://www.templatemonster.com/help/woocommerce-how-to-change-in-stock-out-of-stock-text-displayed-on-a-product-page.html

6. 7. It might be the cache issue at that time. Well, Sound’s Good!! that it has been resolved now.

8. Could you please explain it more clearly, if possible with some screenshots and also if possible with a fresh new topic, as there are already a lot of replies and questions on this topic, so the new topic will help us to understand your issue properly. Hope you can understand.

Regards 8Themes Team.

#334948 Copied
Tagged: button customization, color customization, icon customization, product page customization, product page edits, wordpress woocommerce themes
Viewing 6 results - 1 through 6 (of 6 total)