[Resolved] Views using theme layout and styles

[Author]

Posts

[amitS-4]

I am trying to use views to create pages but I need the resultset generated in my woocommerce loop to use the shopkeeper theme styles and css instead of me trying to create the layout/code

Is it possible? At the moment I am unable to figure out if this is possible?

Thanks
Amit.

[Luis Sacristán Supporter Languages: English (English ) Spanish (Español )]

Hi

Thanks for consulting Toolset Support
I will be happy to help you with your ticket

You can use WooCommerce Views. Please, check this document for further information:
https://toolset.com/documentation/user-guides/getting-started-woocommerce-views/

Regards
Luis

[amitS-4]

Thanks Luis

I understand that I can use woocommerce views, my question is when I am creating a custom shop page I want the layout to be same but product filter is custom so the products loop outputs the products in default theme style and I dont have to actually create any layout.

[Luis Sacristán Supporter Languages: English (English ) Spanish (Español )]

Hi

If I have understood you correctly, you want to use your theme default styles in your Toolset Layout so you don't need to create new styles.

You should replicate the theme HTML code inside your Toolset Layout:

hidden link

Notice the HTML the theme generates:

<ul id="products-grid" class="products products-grid small-block-grid-2 medium-block-grid-3 large-block-grid-4 xlarge-block-grid-6 xxlarge-block-grid-6 columns-6">               
  <li class="delay-1    animate">		
    <div class="product_thumbnail_wrapper ">			 			
      <div class="product_thumbnail with_second_image second_image_loaded" style="background-size: cover;">				
        <a href="<em><u>hidden link</u></em>">					
          <span class="product_thumbnail_background" style="background-image:url(<em><u>hidden link</u></em>)">
          </span>					
          <img src="<em><u>hidden link</u></em>" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="" srcset="<em><u>hidden link</u></em> 450w, <em><u>hidden link</u></em> 242w, <em><u>hidden link</u></em> 100w, <em><u>hidden link</u></em> 920w, <em><u>hidden link</u></em> 150w, <em><u>hidden link</u></em> 306w, <em><u>hidden link</u></em> 1600w" sizes="(max-width: 350px) 100vw, 350px" style="opacity: 1;" width="350" height="435">				</a>			
      </div>
      <!--.product_thumbnail-->			 							            			 							            			 						 
      <div class="yith-wcwl-add-to-wishlist add-to-wishlist-953">		    
        <div class="yith-wcwl-add-button show" style="display:block">	         
          <a href="/shop/?add_to_wishlist=953" rel="nofollow" data-product-id="953" data-product-type="simple" class="add_to_wishlist">        Add to Wishlist</a>
          <img src="<em><u>hidden link</u></em>" class="ajax-loading" alt="loading" style="visibility: hidden; opacity: 1;" width="16" height="16">	    
        </div>	    
        <div class="yith-wcwl-wishlistaddedbrowse hide" style="display:none;">	        
          <span class="feedback">Product added!
          </span>	        
          <a href="<em><u>hidden link</u></em>" rel="nofollow">	            Browse Wishlist	        </a>	    
        </div>	    
        <div class="yith-wcwl-wishlistexistsbrowse hide" style="display:none">	        
          <span class="feedback">The product is already in the wishlist!
          </span>	        
          <a href="<em><u>hidden link</u></em>" rel="nofollow">	            Browse Wishlist	        </a>	    
        </div>	    
        <div style="clear:both">
        </div>	    
        <div class="yith-wcwl-wishlistaddresponse">
        </div>	 
      </div>
      <div class="clear">
      </div>                         
      <a href="#" id="product_id_953" class="button getbowtied_product_quick_view_button" data-product_id="953">Quick View</a>			 		
    </div>
    <!--.product_thumbnail_wrapper-->				 		<h3>
      <a class="product-title-link" href="<em><u>hidden link</u></em>">Lose Oversized Shirt</a></h3>		                 
    <div class="archive-product-rating">					
    </div>                	 		
    <div class="product_after_shop_loop">			 			
      <div class="product_after_shop_loop_switcher">				 				
        <div class="product_after_shop_loop_price">					 	
          <span class="price">
            <span class="woocommerce-Price-amount amount">
              <span class="woocommerce-Price-currencySymbol">$
              </span>238,00
            </span>
          </span>				
        </div>								 				
        <div class="product_after_shop_loop_buttons">					
          <a rel="nofollow" href="/shop/?add-to-cart=953" data-quantity="1" data-product_id="953" data-product_sku="" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>				
        </div>								 			
      </div>			 		
    </div>	 
  </li> 

I know it will be tedious

Hope it helps

Regards
Luis