Views using theme layout and styles

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.

This support ticket is created 7 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Tagged: Views, Views plugin

This topic contains 3 replies, has 2 voices.

Last updated by Luis Sacristán 7 years, 7 months ago.

Assisted by: Luis Sacristán.

Author

Posts

April 21, 2017 at 8:28 am #515693

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.

April 21, 2017 at 4:16 pm #515878

Luis Sacristán

Supporter

Languages: English (English ) Spanish (Español )

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

April 22, 2017 at 7:15 am #516012

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.

April 24, 2017 at 8:35 am #516441

Luis Sacristán

Supporter

Languages: English (English ) Spanish (Español )

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

The forum ‘Types Community Support’ is closed to new topics and replies.