Hide Prices from Shop & Product Archive Pages Woocommerce

Woocommerce is most popular eCommerce platform and very easy to customize the pages by writing simple snippets. Do you want to remove/hide Prices from Shop and Product Category archive pages from Woocommerce?, you can do that through CSS and also through snippet as well. Better if use snippet instead of CSS.

Remove Prices from the Shop and Product Archive (Product Listing) Pages Woocommerce through CSS

Add Below CSS code into your theme’s style.css.


ul.products li.product span.price{
display : none !important;
}

Remove Prices from the Shop and Product Archive (Product Listing) Pages Woocommerce through snippet

Add Below snippet into your theme’s functions.php.


add_filter( 'woocommerce_variable_sale_price_html', 'bpt_remove_prices', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'bpt_remove_prices', 10, 2 );
add_filter( 'woocommerce_get_price_html', 'bpt_remove_prices', 10, 2 );

function bpt_remove_prices( $price, $product ) {
$price = '';
return $price;
}

How to display featured products WooCommerce

WooCommerce has introduce number of useful shortcodes to allow add WooCommerce related content within posts and pages or anywhere on the site. There is also a shortcode available for display Featured Products

[featured_products limit="8" columns="4"]

You can also use Product Attributes to update according to your theme design etc.

Product Attributes

limit – The number of products to display
columns – The number of columns to display

How to set Product as featured in Woocommerce

After logged into WordPress simply navigate to the “Products->All Products”, you’ll notice that there is a column containing stars as in screenshot below:

If star is Filled it’s mean it’s featured or if it’s only outline not filled then it’s not featured. To set a product to the featured products list you simply click the star and vice versa to remove.

Display Featured Products without shortcode

$args_featured = array(  
    'post_type' => 'product',  
    'meta_key' => '_featured',  
    'meta_value' => 'yes',  
    'posts_per_page' => 1  
);  
  
$show_featured_query = new WP_Query( $args_featured );  
      
if ($show_featured_query->have_posts()) :   
  
    while ($show_featured_query->have_posts()) :   
      
        $show_featured_query->the_post();  
          
        $product = get_product( $show_featured_query->post->ID );  
          
        // Output product information here  
          
    endwhile;  
      
endif;  
  
wp_reset_query(); // Remember to reset  

How to create a custom page template in WordPress

First you need to connect your website through FTP client and browser the theme directory
“/wp-content/themes/your-theme”

The Best way to create template you can use any existing page template (e.g. page.php) from your theme instead of create from scratch. Custom Page Template allow you to different the page appearance from regular pages.

1. Copy the page.php (or any existing template) and rename it with the template name you are going to create, like template-home.php for home page template.

2. Open the file and add below code at the top of your template
<?php /* Template Name: Home Page Template */ ?>

3. Upload the file to your theme directory.

Select the page template for page you want to use

Edit/Add Page and select the Page template you created in Page Attributes section under Template Also check in the screenshot as well.

After select the template save/publish the page.

Add product short description to Shop or Category Archive Pages : Woocommerce

if you want to add the product short description to your Woocommerce main Shop page or archive pages and display it just below the product title, you just need to add below code into your theme’s functions.php file.


function bpt_excerpt_in_product_archives() {

the_excerpt();

}
add_action('woocommerce_after_shop_loop_item_title','bpt_excerpt_in_product_archives', 40);

How to Add top bar to Storefront before the header

Storefront don’t have a top bar by default, By adding simple snippet to the theme’s functions.php you can add a Top bar to Storefront theme before the header.

/**
 * Adds a top bar to Storefront, before the header.
 */
function storefront_top_bar() {
 
$html = '
<div id="topbar">';
$html .= '
<div class="col-full">';
 
$html = 'You can add your content here...';
$html = '</div>
;'
}
add_action( 'storefront_before_header', 'storefront_top_bar' );
</div>

Add/Remove Google Fonts from Woocommerce Storefront Theme

Woocommerce Storefront theme has Google fonts into the theme by default. But we still could easily add/remove their google fonts from from child theme, by adding snippet to the child theme functions.php.

// Remove Google Font from Storefront theme
function remove_fonts_from_child_styles(){
wp_dequeue_style('storefront-fonts');
}
add_action( 'wp_enqueue_scripts', 'remove_fonts_from_child_styles', 999);

You can easily add google fonts to storefront child theme y adding simple snipped to child theme’s functions.php.

// add google font to storefront theme
add_filter( 'storefront_google_font_families', 'add_google_font_to_storefront' );
function add_google_font_to_storefront( $family ) {
$family['roboto'] = 'Roboto:300,400,600';
return $family;
}

Display WordPress Posts from Specific Category by Category Id or Slug

Do you want to display WordPress Posts from the Specific Category by Category Id?

    $cat_id = 3; 
    $args = array(
       'post_type' => 'post' ,
       'orderby' => 'date' ,
       'order' => 'DESC' ,
       'posts_per_page' => 6,
       'cat'         => $cat_id,
       'paged' => get_query_var('paged'),
       'post_parent' => $parent
   ); 

   $q = new WP_Query($args);
   if ( $q->have_posts() ) { 
     while ( $q->have_posts() ) {
     $q->the_post();
     ?>
       
 

If you want to show posts with category slug instead of category id then

Replace

'cat'         => $cat_id,

with

'category_name' => 'my-category-slug',

Remove the sidebar from WooCommerce pages on Storefront

If you are using WordPress/Woocommerce for your shop and using Storefront theme, So you notice all of your Woocommerce pages will have sidebar on all the page e.g. shop, category, product etc.

There is no way to remove those from setting unless you manually remove those or use any plugin for that. But you can remove it by using below code in functions.php (of child theme if you are using).


add_action( 'get_header', 'remove_storefront_sidebar' );
function remove_storefront_sidebar() {
if ( is_woocommerce() ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
}
}

Now, open your theme(child theme’s) style.css in the same location and add this code:

body.woocommerce #primary.content-area {
float: none;
width: 100%;
}

Now, all your WooCommerce pages won’t have a sidebar.
Sidebar removed from all the page now. If you want it to remove only from specific page then you can update the condition is_woocommerce() to below

Main Shop Page

is_shop()

Woocommerce Product Category Page

is_product_category() for specific category is_product_category( 'shirts' )

Woocommerce Product Page

is_product()

If you want to learn more about conditional tags then you can check on Woocommerce Conditional Tags.