How to Set Product Category Thumbnail as the Sub Banner Background Image - WpBuilt 1350476922971634823
How to Set Product Category Thumbnail as the Sub Banner Background Image

How to Set Product Category Thumbnail as the Sub Banner Background Image

Designing an e-commerce site is painstaking as you have to create it packed with great design, awesome content and tons of functionality. Another thing, you have to consider from a third person perspective that your site be easily navigated. Imagine a user browsing through your products easily and continuously because subpages display the products category and category thumbnail. Wouldn’t it create a new experience for the user?

Elementor makes it possible for sub pages header (containing the product category title and product category thumbnail) to change as the product category change along browsing through the site.

Follow this tutorial to achieve it:
Step 1
Upload Woocommerce plugin first.
Step 2


Step 3


Step 4

Add product Categories and Product image:

Here is my sample products list:


Step 5
Paste the code on your child-theme > header.php

– Divi Builder > under the “

”:

-Elementor > paste code under the “” :

========================================================================
CODE:

if ( is_product_category() ){

   global $wp_query;

   // get the query object
   $cat = $wp_query->get_queried_object();

   // get the thumbnail id using the queried category term_id
   $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, ‘thumbnail_id’, true );

   // get the image URL
   $image = wp_get_attachment_url( $thumbnail_id );

   // print the IMG HTML
?>
   


     

 


       

 


     


   


========================================================================

7. Paste this code on your child-theme > style.css

/*Banner Section*/
.category-banner#subpages-header {
   padding-top: 57px;
   padding-bottom: 57px;
   background-repeat: no-repeat !important;
   background-size: cover !important;
   background-position: center !important;
}
.cat-row.et_pb_row {
   max-width: 980px;
   margin: 0 auto;
   width: 80%;
   padding: 27px 0;
}
/*Headline text*/
.cat-row.et_pb_row h1 {
   color: #fff;
   font-size: 60px;
   text-align: center;
}

Leave a Reply

×

Cart