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)
Related
I found a code snippet to display the content before the main content and it worked.
Currently the content is displayed on all pages. (except shop page)
The code :
add_action( 'woocommerce_before_main_content', 'BannerShop', 35 );
function BannerShop(){
if(!is_shop()){
echo '<img src="https://localhost/demosite/wp-content/uploads/2015/06/512x356.png" >';
}
}
What I want to ask is, how to display content only for color attribute products in the form of links.
Example :
The display (content) will ONLY SHOW when the url is like this :
mysite.com/color/red/
Sorry if the explanation is not good because I don't really understand this.
Any help is greatly appreciated.
thank you
I understand your question is about displaying that extra content, if the current query is for a product archive page only showing products of a certain attribute 'color'.
Each WooCommerce attribute is an independent taxonomy.
WordPress's is_tax('parameter') function checks, if the query is for an existing custom taxonomy archive page (other than category & tag) & if the query is for that specific taxonomy 'parameter', in your case 'color'.
So, this code snippet in your functions.php or equivalent plugin should work:
add_action( 'woocommerce_before_main_content', 'BannerShop', 35 );
function BannerShop(){
(is_tax('color')) {
echo '<img src="https://localhost/demosite/wp-content/uploads/2015/06/512x356.png" >';
}
}
Though, to make the above template WooCommerce override work, declare WooCommerce support for your theme by adding the following lines to your functions.php or plugin equivalent:
function theme_add_woocommerce_support() {
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'theme_add_woocommerce_support' );
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.
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.
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;
I am using a wordpress theme with two sidebars. I want to disable one for them for a specific page but the code I found regarding disabling sidebar by applying check on function:
<?php get_sidebar() ?>
It will disable both of them. How can I disable one of them only. with the other sidebar working.
Please help!!!!
You can simply for example
<?php if (!is_page('about-me')) get_sidebar(); ?>
This will disable sidebar on about me page. If you put this on page.php (if have any) otherwise put this on index.php. Here 'about-me' is page slug but you can also use page id like is_page(5) and as well as page title too. To check multiple page using slug, id and title you can use an array like
is_page(array(42,'about-me','Contact'));
For more about is_page() function see http://codex.wordpress.org/Function_Reference/is_page
Or using filter in functions.php, simply put this in functions.php
function disable_footer_widgets( $sidebars_widgets )
{
if (is_single())
{
$sidebars_widgets['footer'] = false;
}
return $sidebars_widgets;
}
add_filter( 'sidebars_widgets', 'disable_footer_widgets' );
This is just an example, you have to change widget name.