Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
With a variabele product it shows the price range.
Is it possible to change it in to a from price, with the lowest price showing?
Also the name of the product on my homepage is in blue, I already changed the woocommerce colors, where can I change this?
Thx!
Hi Kathleen
Thanks for reaching out.
Variable Products
Do you perhaps have an example product I could check out. I’m not a WooCommerce expert by any means. This question might need to be moved onto their forums. Let me take a look at an existing product and see if I can research a solution.
Links
Please try going to Appearance > Customize > Theme Design and click General. Change the Content Link Color and Content Link Hover Color to match your WooCommerce colors. This should resolve the probem.
The Url I gave was an example product: http://thedogcompany.nl/shop/product/hurley
The colors are in the right color at the place you give. Woocommerce doesn’t apply them…
Strange issue with the links. Sorry for the hassle. Please try the following at Appearance > Custom CSS:
/* Links */ #main a { color: #dd3333; } #main a:hover { color: #2b1100; }Edit as required.
That worked!
For the prices I move the question to the forum of woocommerce?
Please, if you don’t mind, that would be best. Once you have been provided or located the customisation snippet to execute this change we can help do it in an update safe manner (within a child theme).
I found a code that has to be changed in the functions.php, is that ok?
The code is:
/** * Show only the text "Vanaf" when there is a difference between * $product->min_variation_price AND $product->max_variation_price. */ add_filter('woocommerce_variable_price_html', 'custom_variation_price_ifdiffer', 10, 2); function custom_variation_price_ifdiffer( $price, $product ) { if ($product->min_variation_price !== $product->max_variation_price) { $price = '<span class="from">' . _e('Vanaf') . '</span> '; $price .= woocommerce_price($product->min_variation_price); } return $price; }Sorry not changed but added.
Also found this snippet for the functions.php
/* * Removes products count after categories name */ add_filter( 'woocommerce_subcategory_count_html', 'woo_remove_category_products_count' ); function woo_remove_category_products_count() { return; }That should remove the count of the items in the category.
Let me work up a child theme for you.
NB: All WordPress themes completely overwrite their own theme folder during theme updates. Please don’t make any changes via Appearance > Editor unless you’re working from within a child theme.
Here we go:
https://siteorigin.com/wp-content/uploads/2015/07/vantage-child-kathleen-01.zip
1. Download the ZIP to your desktop.
2. Install from Appearance > Themes > Add New: Upload Theme. Activate.
3. Test it out.
4. If you’re happy then go to Appearance > Customize, activating a child theme, unfortunately, resets this section. You’ll need to redo your settings. If you have a lot of customizations here then I recommend opening Appearance > Customize in a tab before activating the child theme. Activate the child theme in a new tab. Then copy your Customize settings across manuallly.
So I have to do set the colour and menus again?
And for the changes with the price now it says “vanaf” but the price is on a new rule… Looks like “vanaf is linked to the product name as it is a link now.
The counting is gone so that’s nice!
How does it works if Vantage get’s updated? I assume the child theme wil not be updated?
When we activate a child theme menu location settings and the Customizer are reset. No way around this. A core WordPress challenge.
When you update Vantage the parent theme is replaced, the child theme is left untouched. It’s update safe and the correct way to make modifications.
I copied the functions in as provided so you’ll need to take a quick look at those and let me know what you’d like to change. Vanaf comes from this line in the function you sourced:
$price = '<span class="from">' . _e('Vanaf') . '</span> ';Ok! I’m working in the Child theme now.
I’m awaiting help for the ‘vanaf’ problem somewhere else. Hope that wil be solved soon.
In between I found out how I could change the text on the buttons, that works.
But still some questions:
– How do I allign the products in a category see http://thedogcompany.nl/shop/product-categorie/aan-de-lijn/lijnen/
– How do I get the same buttons on my homepage as everywhere else? http://thedogcompany.nl/shop/
Thx!
For the allignment I found this code for the style.css
a.added_to_cart.wc-forward { bottom: 0; position: absolute; display: block; bottom: 0px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { min-height: 295px !important; margin-bottom:10px; } a.button.add_to_cart_button, a.button.product_type_simple { bottom: 30px; position: absolute; }Thanks for the update. Please try the following at Appearance > Custom CSS to resolve the home page:
/* WooCommerce */ a.add_to_cart_button { border-top: solid 1px #d2d2d2 !important; border-left: solid 1px #c3c3c3 !important; border-right: solid 1px #c3c3c3 !important; border-bottom: solid 1px #9f9f9f !important; background: #ffffff !important; background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfdfdf), color-stop(1, #ffffff)) !important; background: -ms-linear-gradient(bottom, #dfdfdf, #ffffff) !important; background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #ffffff 100%) !important; background: -o-linear-gradient(#ffffff, #dfdfdf) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf', GradientType=0) !important; -webkit-border-radius: 3px !important; -moz-border-radius: 3px !important; border-radius: 3px !important; color: #646464 !important; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; width: auto !important; text-decoration: none !important; cursor: pointer !important; line-height: 1 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important; }Hope that helps.
That works! Thx!
I also added the code for the alignment but that doesn’t seem to solve the problem correctly. Any idea?
O and if I add a product to my cart it says that it has been succesfully added but the colour line is blue and there is an icon in green. I want to change this in my own colours…
Are you asking about the button alignment? That’s due to product titles being different lengths. Some fit on one line some go to two lines.
Yes, is there a way to allign them al the same, regardless of the length of the product title?
Ahh sorry, ok the button issue is because some products have the “vanaf” string.
Also the checkout button is blue… http://thedogcompany.nl/shop/winkelwagen/
Try the following at Appearance > Custom CSS:
.woocommerce .products li { min-height: 330px; } .woocommerce ul.products li.product .button { bottom: 0; position: absolute; }Adjust the min-height value as required.
That seems to work everywhere, except the homepage.
Please try changing the min-height to 330px.
360px works for the homepage, but then the other products have a large blank spot between the product and the button…
Please try the following at Appearance > Custom CSS to sort out the cart page:
.woocommerce-cart #secondary { display: none; } .woocommerce .button.alt { border-top: solid 1px #d2d2d2; border-left: solid 1px #c3c3c3; border-right: solid 1px #c3c3c3; border-bottom: solid 1px #9f9f9f; background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfdfdf), color-stop(1, #ffffff)); background: -ms-linear-gradient(bottom, #dfdfdf, #ffffff); background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #ffffff 100%); background: -o-linear-gradient(#ffffff, #dfdfdf); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf', GradientType=0); color: #515151 !important; } .woocommerce .button.alt:hover { background: none !important; background-color: #dad8da !important; border-top: solid 1px #d2d2d2; border-left: solid 1px #c3c3c3; border-right: solid 1px #c3c3c3; border-bottom: solid 1px #9f9f9f; color: #515151 !important; }Please go to your WooCommerce color settings and change your cart button hover color to:
The brief flash of red is coming from WooCommerce color settings being different to the ones we’re trying to apply.
Cool, just make it page dependent:
.woocommerce .products li { min-height: 300px; } .home.woocommerce .products li { min-height: 360px; }We’re getting there! The red was a primary color for woocommerce. That’s solved also.
Seems remaining question is:
O and if I add a product to my cart it says that it has been succesfully added but the colour line is blue and there is an icon in green. I want to change this in my own colours…
O wait, the homepage isn’t listening to the min. height….
Thanks for the feedback. The body class is different than expected because the store is in demo mode. Please try:
.woocommerce .products li { min-height: 300px;}.home .products li { min-height: 360px;}Please try the following for the cart message:
.woocommerce #page-wrapper .woocommerce-message { border-top-color: #00bcff; } woocommerce .woocommerce-message:before { color: #8fae1b; }That works!
For the cart message it’s just the icon that is in an other colour.
And here is a simular message with the blue clour and blue icon. http://thedogcompany.nl/shop/afrekenen/
Try adjusting:
.woocommerce .woocommerce-info { border-top-color: #1e85be; } .woocommerce .woocommerce-info:before { color: #1e85be; }