Return to previous page

Theme Changes - by kh1mie - on WordPress WooCommerce support

This topic has 4 replies, 2 voices, and was last updated 7 years, 11 months ago ago by Eva Kemp

kh1mie

Participant

December 23, 2016 at 18:56

Hi Team,

I’d like some help to make some few changes in my theme. Thank you for the help in advance! You guys are the best!!! If anyone can help me with this customization, that will be awesome! I’ll be so thankful!!!!! So here’s some few changes that I would love some help.

SINGLE PRODUCT PAGE
SIZING GUIDE http://prnt.sc/dn3zex
– I want to make it in a sentence case and font 2pt bigger.
– If possible to add an icon like this http://prntscr.com/dn430y

Product Tab http://prntscr.com/dn456o
– I want to make it in a sentence case.
– Also by default it’s open and displays the information of the product description. I want it to just be close until customer clicks it, like this http://prntscr.com/dn47d8.

Related Products http://prnt.sc/dn48mn
I couldn’t find where I can make the changes for this one and I want to make them smaller that will display 5 products.

WIDGETS
Shop Sidebar http://prntscr.com/dn4hr6
– If possible I want all the description in sentence case.

SHOP PAGE
– I want the product name closer to the price http://prntscr.com/dn4pwc . I’ll make the product name shorter so it won’t look weird.
– Also for the price display, is it possible to make a default sale font color as red? Right now it’s the same color as the main color scheme.
– Also I want to get rid of the “SELECT OPTIONS” button, instead I would like it to just be plain “More Colors” link.

Please, contact administrator
for this information.

#150071 Copied

3 Answers
Eva Kemp

Support staff

December 26, 2016 at 16:20
Hello,

1. Unfortunately to make the text in sentence case you have to edit the file wp-content/themes/woopress/framework/woo.php in line 878. To change its size please use this css code in Theme Options > Custom CSS > Global Custom CSS:
```
.product-information .size_guide a {
  font-size: 20px;
}
```
Write size value you need.

To add an icon you should use this code:
```
.product-information .size_guide a:before {
  content: url(http://link_to_your_icon);
}
```
2. Please use this css code:
```
.tabs .tab-title {
text-transform: capitalize;
}
```
To close first tab by default you need edit the file wp-content/themes/woopress/woocommerce/single-product/tabs/tabs.php and change the code <?php if($i == 1) to <?php if($i == 0) in line 28, and in line 31. Also edit the file wp-content/themes/woopress/js/etheme.js and comment lines 1750 the code currTab.find('.tab-title:eq('+openNumber+')').addClass('opened').next().show(); and 1752 the code currTab.find('.tab-title').first().addClass('opened').next().show();.

3. To change related products number go to wp-content/themes/woopress/framework/theme-functions.php, change the number “4” to “5” in line 2742.

4. Use this css code:
```
.product_list_widget .media-heading a {
    text-transform: capitalize;
}
```
5. As you have some product titles in two rows it can be done with this css code:
```
.products-grid .product-title {
    margin: 0 0 0px;
    height: 40px !important;
}
```
Use this code for sale price:
```
ins {
    color: red !important;
}
```
To change button text use this code in functions.php file:
```
add_filter( 'woocommerce_product_add_to_cart_text' , 'custom_woocommerce_product_add_to_cart_text' );
function custom_woocommerce_product_add_to_cart_text() {
    global $product;    
    $product_type = $product->product_type;  
    switch ( $product_type ) {
case 'variable':
            return __( 'More Colors', 'woocommerce' );
        break;
}
}
```
Regards,
Eva Kemp.
#150214 Copied
kh1mie

Participant

December 27, 2016 at 04:45

Hi Eva,

Thank you so much for all this help! Everything worked out the way you explained the changes except one regarding wp-content/themes/woopress/framework/theme-functions.php, change the number “4” to “5” in line 2742. I changed it but it seems like it didn’t work.

Also i forgot to mention on the widget part, I want to make changes in the sale color. http://prntscr.com/doauii

I tried using this code below.

.product_list_widget .media-heading a {
text-transform: capitalize;
color: #C70039 !important;
}

But it changed all font to red. How can I change it to make the sale price to red instead of the default color scheme.

#150253 Copied
Eva Kemp

Support staff

December 27, 2016 at 16:29
Hello,

Please provide FTP credentials.
For the second issue, please add this code in Global Custom CSS:
```
.product_list_widget ins span {
    color: #C70039 !important;
}
```
Regards,
Eva Kemp.
#150318 Copied
Viewing 4 results - 1 through 4 (of 4 total)