Change background of woocommerce /product-category page - woocommerce

I cant seem to find how to change the background of the woocommerce /product-category page. I've changed the archive and single product pages using this css:
.woocommerce.post-type-archive-product {
background-image:none !important;
}
.woocommerce.single-product {
background-image:none !important;
}
Which worked fine, but yeah I cant get it to work with the category page.
Thank you for any help.

please try this code in your functions.php
if(is_product_category()){
add_action('wp_head',function(){
?>
<style>
.woocommerce.post-type-archive-product {
background-image:none !important;
}
.woocommerce.single-product {
background-image:none !important;
}
</style>
<?php
});
}
in the above code, I used woocommece's condition tag to determine product category page and then added your CSS to its head section.

Related

How to make address field width wider on WooCommerce's Edit Order page?

Would be helpful since addresses are usually long and having the field a bit wider would make it easier to edit the text. Please advise.
Address field as shown in image below:
Add this to the functions.php file:
add_action('admin_head', 'custom_admin_stylez');
function custom_admin_stylez() {
echo '<style>
._billing_address_1_field {
width: 100% !important;
}
._billing_address_2_field {
width: 100% !important;
}
</style>';
}

Hiding the manual refund button in WooCommerce order

I have been trying to get this down all day and it is driving me crazy. I know it should be possible using display: none;
I am trying to remove the "Refund Manually" Button
Try this in your functions.php
add_action('admin_head', 'remove_manual_refunds');
function remove_manual_refunds() {
echo '<style>
.do-manual-refund {
display: none !important;
}
</style>';
}

Hiding Price Unless Logged In

I have a membership site and need prices hidden until the user is logged in. How can I adjust this so prices are hidden only for users who are NOT logged in?
.imagemapper-wrapper .my_product_price { display:none !important; }
Currently prices are hidden from everyone.
CSS only option:
.imagemapper-wrapper .my_product_price {
display: none;
}
.logged-in .imagemapper-wrapper .my_product_price {
display: inherit;
}
One way you can do this is with the wp_head hook. In the hook you can echo the style if a user is logged in with is_user_logged_in(). See below:
<?php
// functions.php
add_action('wp_head', function(){
if (is_user_logged_in()) {
echo '<style>.imagemapper-wrapper .my_product_price { display:none !important; }</style>';
}
});
Another option is to use a custom css classname:
// functions.php
add_filter('body_class', function($classlist) {
// add custom css class to body element if user is logged in
if (is_user_logged_in()) {
$classlist[] = 'user-is-loggedin';
}
return $classlist;
});
Then is your css use the new classname:
// your-stylesheet.css
.imagemapper-wrapper .my_product_price { display:none; }
.user-is-loggedin .imagemapper-wrapper .my_product_price { display:block !important; }
If you want to use CSS instead of removing the pricing unless the user is logged in, use the wp_head filter. Put this in your functions.php file:
add_action('wp_head', static function() {
if ( ! is_user_logged_in() ) {
echo "<style>.imagemapper-wrapper .my_product_price { display:none !important;}</style>";
}
}
This uses is_user_logged_in() function to test if the user is logged in. If the user is not logged in, print this style in your header.
So I ended up merging two answers together. display: inherit wasn't working so I tried block !important instead and it worked like a charm. Thank you all for your advice and suggestions. I am now able to hide both the price and add to cart buttons when a user is NOT logged and show them when they are! I was beyond excited when I finally got this to work. Thank you all!
#mega_main_menu>.menu_holder>.menu_inner>ul>li.default_dropdown .mega_dropdown>li>.item_link {height:auto}
.logged-in .imagemapper-wrapper .my_product_price {
display: block !important;
}
.imagemapper-wrapper .my_product_price { display:none !important; }
.logged-in .imagemapper-wrapper .my_add_item { display:block !important; }
.imagemapper-wrapper .my_add_item { display:none !important; }
.logged-in .my_product_footer .my_view_item {width: 50%}
.my_product_footer .my_view_item {width: 100%}

I can't delete or hide Displaying all results in woocomerce

Adding to CSS did nothing, adding snippets from php below also.
CSS:
.woocommerce-result-count {
display: none;
}```
Snippets:
```removeaction ('woocommercebeforeshoploop', 'woocommerceresultcount', 20);```
Override woocommerce default styling like so:
.archive .woocommerce-result-count {
display: none !important;
}

Shop image dont change

I have an issue with the backgroung of shop-image here is the LINK to shop page, and here is a screenshot
IMAGE
Here is the code that i tryed to change background :
div.page-title.page-title-default.title-size-default.color-scheme-light.title-design-centered.title-shop {
background-image:none;
background-color:#111111;
}
Add !important to background-image property, try this:
div.page-title.page-title-default.title-size-default.color-scheme-light.title-design-centered.title-shop {
/* important */
background-image:none !important;
background-color:#111111;
}

Resources