need help with woocommerce settings (answered already) WordPress
- SOLVED
As always I appreciate the help!
Here is the link to the page with an example of what I need adjusted.
http://davianawinery.com/wines/
I want to change the color of the Price area of the Add to cart button (bottom of button is black but i need the top white section changed) to the background color of the page and I would like to make the buttons smaller. I believe the buttons are set larger than normal by the template designer and they are just too large.
Also on this page
http://davianawinery.com/product-category/wine-club/
I want to change the "Free" tag to "join" these are wine club options that have no price to join but the customer will be charged later so the use of Free doesn't work in this situation.
Another issue that just came up is that now all product images are huge. They used to be perfect, not sure what happened. It looks like the Woocommerce is not forcing its own sizes
Also,
http://davianawinery.com/product-category/current-vintages/
There is also a hover over a product that is supposed to be some type of add to cart image that is not showing correctly. Any ideas on what it is supposed to look like. When you hover on one of the bottles on the page above current Vintages a little box pops up with what looks like a cut out of one of the bottle images but I can't tell what it is supposed to be showing. I can't find another woocommerce site that lays out the product like this and has a popup for add to cart so I am not sure what is happening. An add to cart button would be great!
Thanks
Answers (3)
Hariprasad Vijayan answers:
Hi,
Add this code to your CSS. Hope it will fix first issue
.product.woocommerce {
background-color: #791b1b;
color: #fff;
}
.button.add_to_cart_button.product_type_simple {
line-height: .3em;
}
Try this in functions.php, it change "Free" to "Join"
add_filter('woocommerce_empty_price_html', 'free_to_join');
function free_to_join() {
return 'Join';
}
Am not sure what happening for the image. Am checking about it.
movino4me comments:
First one worked but I realize that I now need to be able to change the color of the price since the white backgound is not there any more.
The functions.php addition did not work.
Getting closer!
movino4me comments:
Sorry, button resize did not work either
Hariprasad Vijayan comments:
Try this
.product.woocommerce {
color: #791b1b;
text-align: center;
}
.button.add_to_cart_button.product_type_simple {
line-height: .3em;
width: 80px;
margin-left: 40px;
padding-left: 15px;
padding-right: 15px;
}
Hariprasad Vijayan comments:
And try this in functions.php
add_filter( 'woocommerce_variable_free_price_html', 'free_to_join' );
add_filter( 'woocommerce_free_price_html', 'free_to_join' );
add_filter( 'woocommerce_variation_free_price_html', 'free_to_join' );
function free_to_join( $price ) {
return 'Join';
}
Hariprasad Vijayan comments:
There is an option in woocommerce settings to set image size. Did you check it?
Hariprasad Vijayan comments:
Is it works for you?
Jihan Ahmed answers:
Well... I guess you first one is solved. Here how you can change the free to join or anything you want
//change the free to join
add_filter( 'woocommerce_free_sale_price_html', 'ddw_wcde_custom_free_price_html' );
add_filter( 'woocommerce_free_price_html', 'ddw_wcde_custom_free_price_html' );
function ddw_wcde_custom_free_price_html( $price ) {
$price = 'Join !';
return esc_attr__( $price );
}
paste this on functions.php this code is tested on the latest version of woocommerce.
For fixing the large images remove this from style.css
.product_item img {
height: auto;
width: 100%;
}
For the last issue I think simple add t cart button is nice here instead of having pop ups see the attached if its okay I can tell u the codes needed to changed.
movino4me comments:
Jihan, the product image being too big is fixed now! thank you much. I dont need the popup add to cart so please let me know the codes to fix that and we should be done!
movino4me comments:
Does anyone have any ideas on how to deal with the missing Sprite (add to cart) on this page? its the last part of the question that is unanswered. See below
Also,
http://davianawinery.com/product-category/current-vintages/
There is also a hover over a product that is supposed to be some type of add to cart image that is not showing correctly. When you hover on one of the bottles on the page above current Vintages a little box pops up with what looks like a missing sprite image and it seems to be farther to the right than it is supposed to be.. An add to cart button would be great!
Jihan Ahmed comments:
it seems that you have used some hook/filters to remove the add to cart button. Can u plz unhook it from functions.php and by the the add to cart button image is set to show on hover. yeah still you have the Sprite image and this can be fixed with little css. If you feel uncomfortable doing this send me wp-admin login in PM i'll do the rest.
Thanks !
movino4me comments:
Jihan,
Sorry, i disabled the shop as it was not complete. I re-enabled it for the visual. I feel comfortable making the change so please post the code and I will test it.
Thanks!
Jihan Ahmed comments:
well.. I am not sure which you followed to customize the woocommerce. If you have followed template overriding then change the positing of add to cart button to bottom or if you have done this using woocommerce hooks then change the values.
The rest will do the below css replace it with the original on style.css
.product_button {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
bottom: 0;
display: block !important;
height: auto !important;
margin: 0;
padding: 0;
position: relative;
right: 0;
width: 35px;
}
.button.add_to_cart_button.product_type_simple {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
color: #791B1B !important;
height: auto !important;
line-height: normal;
margin-left: 0;
margin-top: 15px;
padding-left: 15px;
padding-right: 15px;
text-indent: 0 !important;
width: auto !important;
}
movino4me comments:
Jihan,
I went to the style.css sheet and found the only instance of .product_button { and replaced the containing code with your text above. it did not create a add to cart button like your image. Any ideas? Up to now all changes to the woocommerce cart were done by custom css.
cheers,
movino4me comments:
Jihan, look at the following page http://davianawinery.com/vineyards/ the css code that I put in broke the theme. any ideas? I copied back the original css but still not fixed.
movino4me comments:
never mind I replaced the theme and it fixed itself!
Maryke Janse van Rensburg answers:
To change any text within WooCommerce you can have a look at this article http://docs.woothemes.com/document/woocommerce-localization/ I used it on my site http://www.freelanceexpress.co.za where I changed it to an enquiry type instead of shop. This way you make sure that any language changes stay intact when upgrading. First you have to change you language of your site to 'en_US' in you wp-config file and the follow those steps in the article.