Support » Plugin: WooCommerce » related.php Styling CSS/Javascript

  • Resolved paulanzr

    (@paulanzr)


    I am trying to override the Classes and ID’s and also some javascript in the “Related Products” section of single product pages. I want to replace the current styling with this nice looking one (http://nicesnippets.com/live/best-product-display-slider-using-bootstrap-demo.html).

    But I am unable to locate the html to change the classes.

    I would really appreciate any help or guidance.

    This is the code I am using:

    <?php
    /**
     * Related Products
     *
     * This template can be overridden by copying it to yourtheme/woocommerce/single-product/related.php.
     *
     * HOWEVER, on occasion WooCommerce will need to update template files and you
     * (the theme developer) will need to copy the new files to your theme to
     * maintain compatibility. We try to do this as little as possible, but it does
     * happen. When this occurs the version of the template file will be bumped and
     * the readme will list any important changes.
     *
     * @see 	    https://docs.woocommerce.com/document/template-structure/
     * @author 		WooThemes
     * @package 	WooCommerce/Templates
     * @version     3.0.0
     */
    
    if ( ! defined( 'ABSPATH' ) ) {
    	exit;
    }
    
    global $product, $woocommerce_loop;
    
    if ( empty( $product ) || ! $product->exists() ) {
    	return;
    }
    
    if ( ! $related = $product->get_related( $posts_per_page ) ) {
    	return;
    }
    
    $args = apply_filters( 'woocommerce_related_products_args', array(
    	'post_type'            => 'product',
    	'ignore_sticky_posts'  => 1,
    	'no_found_rows'        => 1,
    	'posts_per_page'       => $posts_per_page,
    	'orderby'              => $orderby,
    	'post__in'             => $related,
    	'post__not_in'         => array( $product->id )
    ) );
    
    $products                    = new WP_Query( $args );
    $woocommerce_loop['name']    = 'related';
    $woocommerce_loop['columns'] = apply_filters( 'woocommerce_related_products_columns', $columns );
    
    if ( $products->have_posts() ) : ?>
    
    <div class="collection-products">
                <?php woocommerce_product_loop_start(); ?>
    
                <?php while ( $products->have_posts() ) : $products->the_post(); ?>
    
                        <?php wc_get_template_part( 'content', 'product' ); ?>
    
                <?php endwhile; // end of the loop. ?>
    
                <?php woocommerce_product_loop_end(); ?>
    
    	</div>
    
    <?php endif;
    
    wp_reset_postdata();
    

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi @paulanzr,

    Do you copy related products template into your theme under correct (woocommerce) directory? If not so make sure to override template correctly. The changes should reflect.

    Let us know if this is not the case.

    Thread Starter paulanzr

    (@paulanzr)

    Hello @aranwer104,

    I have copied the folder and everything is working perfect.

    Plugins do not work (which is unfortunate), I am guessing it is because the Theme structure or code.

    Hi @paulanzr,

    Plugins do not work (which is unfortunate), I am guessing it is because the Theme structure or code.

    Can you explain what do you mean by plugins do not work?

    I am not sure whats going on but the WC template overriding should work if you followed the process correctly. In your case you need to override related products template.

    Thanks

    Thread Starter paulanzr

    (@paulanzr)

    @aranwer104

    Can you explain what do you mean by plugins do not work?

    I tried using a plugin to make the Related Product section into a slider for me, but they do not work.

    Plugin:
    WooCommerce Related Product Slider

    I found a limited and temporary solution by using DOM Javascript to change classes but there has to be a better way.

    I cannot find the HTML within the WC templates that contains classes and id’s that I see with browser inspector. I think the classes and id’s are generated by php code.

    I am not sure whats going on but the WC template overriding should work if you followed the process correctly. In your case you need to override related products template.

    Yes my WC overrides are working just fine. My issue is how to locate and modify classes and ids of this template. Code posted above works but it does not let me or show me the classes and ids to modify.

    • This reply was modified 5 years, 3 months ago by paulanzr.
    • This reply was modified 5 years, 3 months ago by paulanzr.

    @paulanzr,

    So you are using plugin for displaying related products. maybe the plugin you are using is overriding default WC template. its good idea to ask the plugin vendor here on plugin’s own support channel.

    Btw i browse the plugin source on trac and came across this class. see wpl_woo_related_product_slider method and make sure if you are seeing same markup on your page. you can remove/replace hooks.

    I hope it will help you to get into right direction.

    Thanks

    Thread Starter paulanzr

    (@paulanzr)

    @aranwer104

    1. I am not using plugin.
    2. My issue is not hooks.
    3. My issue is css classes and ids with the code above.

    It seems you did not read my issue properly.

    This has led me nowhere.

    Thanks anyway.. I hope someone that can understand my issue will contribute soon.

    The line:
    wc_get_template_part( 'content', 'product' );
    is calling the template: content-product.php to display the product blocks.

    content-product.php doesn’t display the blocks itself. It shows the hooks used to display the various parts of the product block. For example:

    * @hooked woocommerce_template_loop_product_title - 10	 */
    do_action( 'woocommerce_shop_loop_item_title' );

    calls the function woocommerce_template_loop_product_title() which is in wc-template-functions.php, and that’s where we find the classes for the product title element.

    There are several parts to a product block, and following each part through to the function that actually does the work could be tedious. And, if you override these part functions, that would affect the normal product blocks in the shop and category page.

    Consider replacing wc_get_template_part( 'content', 'product' ); in your custom related.php with your custom functions to output the block.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘related.php Styling CSS/Javascript’ is closed to new replies.