Is there a CSS ID for the WooCommerce shop page like there is for single-product etc, so that I can easily target CSS for that page only?
WooCommerce does not add a body class specifically for the main shop page.
post-type-archive-product is probably enough for most cases.
But if you want to specifically style the main shop page instead of all product archives then you can use a filter:
add_filter('body_class', 'add_my_woocommerce_shop_body_class');
function add_my_woocommerce_shop_body_class($classes)
{
if (is_shop()) {
$classes[] = 'my-woocommerce-shop-class';
}
return $classes;
}
You can check for classes in body tag of your shop page. If your theme adds any specific class for shop then you'll find it there else post-type-archive-product class may help.
Related
On my woocommerce e-commerce page https://www.vattenliv.se/produkt-kategori/filter/ozon-och-proteinskimmer/ there are some products that does not have any product image set. Instead the custom placeholder image shows. Is there a way to make these placeholder images link to each product page, just like the other products?
The site uses the theme OceanpWP and Elementor page builder.
Peter
I believe the best way to do this is by using a child theme, to ovewrite the woocommerce function. This code in your child theme functions.php file should work.
<?php
if (!function_exists('woocommerce_get_product_thumbnail')) {
function woocommerce_get_product_thumbnail($size = 'shop_catalog', $deprecated1 = 0, $deprecated2 = 0) {
global $post;
if (has_post_thumbnail()) {
return ''.get_the_post_thumbnail($post->ID, $size).'';
}
elseif(wc_placeholder_img_src()) {
return ''.wc_placeholder_img( $size ).'';
}
}
}
?>
last days I have been writing my own WordPress theme, but I run into another problem. These times I have no clue, how to make it possible.
I would like to add a class to every frontpage on my website. So if a single page becomes a frontpage, it will get another class to body tag like "home".
Almost every premium theme gots this funcion, but I just cant find the solution.
Does anybody have any idea?
Thank you! Stepan
You can add the class in body tag using body_class filter as shown below:
function home_body_class($classes) {
if ( is_front_page() ) {
$classes[] = 'home';
}
return $classes;
}
add_filter( 'body_class', 'home_body_class' );
You can manipulate the condition for the static homepage, blog page and so on.
This is what I need to do:
To target only the main shop page with CSS (a specific custom class I created as mentioned below).
This is what I've done and tried so far:
I have an override template of archive-product.php in my child theme.
In this override template I've added a div with a custom class custom-shop-class just before the product loop start, because I want to target the looped products specifically.
I tried targeting with class page-id-4 because if I hover over the "shop" page in wp-admin, it gave me http://.../post.php?post=4&action=edit
The problem I'm having is as follows:
From what I've discovered is that the same archive-product.php template is being used in the other various shop pages and not only in the main "shop" page (correct me if I'm wrong), so when I target my custom-shop-class with CSS, it affects all the other shop pages using the same template file, and it must not.
There is no unique identifier or class specifically for the shop page, something like the page-id-?? class in the body tag (as in the usual WP pages).
Any suggestions on the best method/solution?
Set a conditional statement to check for the primary shop page, then echo the div in question if that statement evaluates to true.
WooCommerce Conditional Tag for main shop page:
is_shop()
Example
if (is_shop()) {
echo "<div class='custom-shop-class'></div>";
} else {
echo "<div class='custom-product-category-class'></div>";
}
Alternatively:
<?php if (is_shop()):?>
<div class="custom-shop-class"></div>
<?php else: ?>
<div class="custom-product-category-class"></div>
<?php endif;?>
Conditional Tags | WooThemes Documentation
Using the filter body_class with the is_shop conditional you can target the main WooCommerce shop page.
add_filter( 'body_class', 'woo_shop_class' );
// Add WooCommerce Shop Page CSS Class
function woo_shop_class( $classes ) {
if ( is_shop() ) // Set conditional
$classes[] = 'woo-shop'; // Add Class
return $classes;
}
The code goes in your themes functions.php file.
To build on the answer provided here, how might I go further and add a unique identifier to the shop page based on the active WPML language? (I'm basically trying to reduce a font size on the German version of the shop page only - it's proving surprisingly difficult to do)
i'm trying to remove the page title from my woocommerce shop page. If i use this css the page title is removed from all pages, this is not what i want.
.page-heading h1 {display: none;}
So i started looking for a page-id, but it seems the shop is a post, so i used postid of my page
.postid-15169 .page-heading h1 {display: none;}
but this doesn't work at all
i also tried to put this is my functions.php
add_filter( 'woocommerce_page_title', false);
But this doesn't do anything either. I guess it's not the shop title i'm needing to remove, just the page title.
Any idea what i can do to remove the title for this page only ?
you can find the page here: https://goo.gl/5LNwRR
I added a ccs code:
.page-title-shop h1 {
display: none;
}
It worked for Woocommerce 3.2.x
Instead of using css, you can use woocommerce filter to get the job done.
function wc_hide_page_title()
{
if( !is_shop() ) // is_shop is the conditional tag
return true;
}
add_filter( 'woocommerce_show_page_title', 'wc_hide_page_title' );
You can remove titles from all woocommerce pages. Here is a blog post about this.
How do I hide some CSS classes on some pages in WordPress? Like if I want to hide featured image in blog posts we use:
.single .post-thumbnail {
display:none;
}
I want the class (like .single) for homepage, search page, archives, etc.
You would need to target the page class. If you look at the source code on whatever page you are on, you'll notice the body class include a unique identifier for your page. You can then target that way. See the Codex for a full run-down of page classes.
Home is home, search is search, archives is archive. The homepage won't be single because that's reserved for posts.
You could set custom ones with a filter.
add_filter( 'body_class', 'new_body_class' );
function new_body_class( $classes ) {
if ( is_front_page())
$classes[] = 'custom-class';
return $classes;