Woo Styling

Support
#1

Hi X,

I’m trying to help reformat an existing Woo shop that has previously only been in catalogue mode (hiding prices).

Here are a few issues I am encountering. Any assistance would be appreciated.

  1. I can’t figure out how to “unhide” prices. All of the prices are listed on the products. Most products are “variable products.”

There’s a plugin on the site called Custom Price Labels. It doesn’t seem to make a difference if it’s active or deactivated. I’ve also looked at the Visibility Options and made sure Purchases and Pricing are Enabled. What I am missing?

There was some CSS code I removed:

/remove prices from woo index pages/
ul.products li.product .price {
display:none !important;
}

form.woocommerce-ordering {
display: none;
}

  1. I’d like to remove all boxes and box shadows plus any separator lines from products. In other words, just the image (with square corners), product title, then price. In the Customizer you’ll see CSS which accomplished this on another Integrity site but doesn’t seem to be working correctly over here.

Thanks so much for your help!!

#2

Hi There,

Thanks for writing in!

Can you please send us a screenshot that you want to achieve in the page. I am little confuse about your requirement.
Please send us a screenshot so that we can suggest you the css.

Thanks

#3

Hi again,

Sorry if my numbers were confusing. There are TWO issues here.

ONE: Product Prices are currently hidden. We want them VISIBLE. And I can’t pinpoint why they aren’t visible. Do you mind having a look at the back end because I really thought I looked at all possible issues?

TWO: We’d like each product to have a clean appearance. No lines, shadows or boxes around products. (uploading this image, it appears that the preview puts a thin box around the whole images. I’m not sure if that will appear when I press reply but we don’t want lines or boxes anywhere.
Here is a decent example: https://pronounceskincare.com/shop/skincare/

Thanks so much!

#4

Hello There,

Thanks you for the clarifications.

1.) The price is not showing because you have added a custom code in your child theme’s functions.php file to remove it. Please remove this code:

// Remove prices everywhere
 
add_filter( 'woocommerce_variable_sale_price_html', 'businessbloomer_remove_prices', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'businessbloomer_remove_prices', 10, 2 );
add_filter( 'woocommerce_get_price_html', 'businessbloomer_remove_prices', 10, 2 );
 
function businessbloomer_remove_prices( $price, $product ) {
$price = '';
return $price;
}

2.) To remove the borders and shadows, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce .entry-wrap,
.woocommerce li.product {
    box-shadow: none;
    border: none;   
}

You must change the background color as well to achieve the same look with the example url. Please go to X > Launch > Options > Layout & Design > Background Options. You must change the background color and upload a background pattern and background image to update the settings. You may removed the pattern/image afterwards. This step is to make sure that the settings is updated and saved.

Please let us know if this works out for you.

#5

Yes the php! Thanks, that did the trick!

However, the CSS for to remove the box shadow and border didn’t work. I also added !important but it didn’t change. Below is an image in case it helps.
We’d also like to align the products to the bottom of the row because the images vary so much in height. I recognize that the images should all be the same (and with white backgrounds) but we are unable to change all of the images right now.

Thanks for being so fabulous!

#6

Hi There,

Please find this custom CSS:

@media (max-width: 480px) {
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 48%;
}

And change to this:

@media (max-width: 480px) {
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 48%;
}
}

After that also add this custom CSS:

.woocommerce li.product .entry-featured img {
    max-height: 200px;
    min-width: auto;
    width: auto;
    margin: 0 auto;
    display: block;
}
.woocommerce li.product .entry-header h3 {
    font-size: 18px !important;
    vertical-align: middle;
}
.woocommerce li.product .entry-wrap {
    min-height: 110px;
}

Hope it helps :slight_smile:

#7

Thanks Thai! This helped resolved the main issues and it looks so much cleaner. But that said, it doesn’t seem like it effects the Related Products. They still have a box shadow (image below)

#8

Hi There,

Please find this custom CSS:

.woocommerce .entry-wrap,
.woocommerce li.product {
    box-shadow: none;
    border: none;   
}

And change to this:

.woocommerce .upsells ul.products li.product, 
.woocommerce .related ul.products li.product, 
.woocommerce .cross-sells ul.products li.product,
.woocommerce .entry-wrap,
.woocommerce li.product {
    box-shadow: none;
    border: none;   
}

Hope it helps :slight_smile:

#9

Thank you for your quick reply!! Now the Related Products are looking good but I noticed that the products are only aligned on the some /product-category/ pages but not all.

For example, this page looks good to me: /product-category/beverage-fountains/
but this does not: /product-category/tiered-trays/

There are lots of pages that look good, and but more that don’t look good and it doesn’t look to be a parent category issue.
Here’s an image of what I am trying to accomplish again for reference.

#10

Hi There,

Please edit your pictures in Photoshop or similar software and upload all pictures with the same size for best results.

Hope it helps

Joao

#11

Okay ---- I know I was asking a lot :slight_smile: - Just not sure if the clients will always be upload correct image sizes.

Thanks for all of your help! Looks much, much better!

#12

Hi There,

We can force those images to have the same min-height, but that means stretching those wide oriented images a little bit. if that’s fine, you can add this to Theme Options > CSS.

#grid-29109 img.tg-item-image {
	min-height: 200px;
}

Thanks,

#13

Thanks, that didn’t seem to help, but it’s okay – I really think they should all be photoshopped.

Thanks again!!

#14

Hi again, If I’m trying to remove prices from the index pages - what do I need to delete from the snippet above? The client only wants them when you click on the actual product.

For example, we don’t want prices on this page: http://apexfountains.staging.wpengine.com/product-category/beverage-fountains/
but we do want them on this page: http://apexfountains.staging.wpengine.com/product/5th-avenue/

Thanks.

#15

Hi There,

Please add the following code to Theme Options CSS

.archive.woocommerce .price > .amount {
display: none;
}

Hope it helps!

#16

Hmm, that didn’t seem to do the trick - even with !important. The prices are still appearing on all the product category pages. We’d like them to appear only on the actual product pages. Any other suggestions?

Thanks for your help as always!

#17

Hi again,

I tested the above code in Chrome’s developer tools and it works fine, there could be a syntax error in your Customizer that is preventing the CSS to take effect, kindly add the following code in your Child Theme’s style.css file:

.archive.woocommerce .price > .amount {
    display: none !important;
}

Or if you’re using any optimization plugin / service make sure to purge the cache first and then disable it for a while and check your site again.

If the above code works in your Child Theme then look out for a syntax error in your Customizer and fix it so this doesn’t happen in future.

Hope this helps!

#18

Thank you - that worked for most pages but there’s still some residual pricing on some categories. It’s a line below the product name.

For example:
http://apexfountains.staging.wpengine.com/product-category/punch-bowls/http://apexfountains.staging.wpengine.com/product-category/tabletop-candelabra/

#19

Hi again,

Please add the following code as well:

.archive.woocommerce .price {
    display: none !important;
}

Cheers!

#20

Thank you!!! It looks good now. :wink: