Title: related.php Styling CSS/Javascript
Last modified: February 26, 2018

---

# related.php Styling CSS/Javascript

 *  Resolved [paulanzr](https://wordpress.org/support/users/paulanzr/)
 * (@paulanzr)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/related-php-styling-css-javascript/)
 * 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](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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Frelated-php-styling-css-javascript%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 7 replies - 1 through 7 (of 7 total)

 *  [Anwer AR](https://wordpress.org/support/users/aranwer104/)
 * (@aranwer104)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/related-php-styling-css-javascript/#post-10018593)
 * Hi [@paulanzr](https://wordpress.org/support/users/paulanzr/),
 * Do you copy related products template into your theme under correct (woocommerce)
   directory? If not so make sure to [override](https://docs.woocommerce.com/document/template-structure/)
   template correctly. The changes should reflect.
 * Let us know if this is not the case.
 *  Thread Starter [paulanzr](https://wordpress.org/support/users/paulanzr/)
 * (@paulanzr)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/related-php-styling-css-javascript/#post-10020512)
 * Hello [@aranwer104](https://wordpress.org/support/users/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.
 *  [Anwer AR](https://wordpress.org/support/users/aranwer104/)
 * (@aranwer104)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/related-php-styling-css-javascript/#post-10023679)
 * Hi [@paulanzr](https://wordpress.org/support/users/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](https://wordpress.org/support/users/paulanzr/)
 * (@paulanzr)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/related-php-styling-css-javascript/#post-10024570)
 * [@aranwer104](https://wordpress.org/support/users/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](https://wordpress.org/plugins/woo-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 8 years, 3 months ago by [paulanzr](https://wordpress.org/support/users/paulanzr/).
    -  This reply was modified 8 years, 3 months ago by [paulanzr](https://wordpress.org/support/users/paulanzr/).
 *  [Anwer AR](https://wordpress.org/support/users/aranwer104/)
 * (@aranwer104)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/related-php-styling-css-javascript/#post-10026112)
 * [@paulanzr](https://wordpress.org/support/users/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 ](https://wordpress.org/support/plugin/woo-related-product-slider)
   on plugin’s own support channel.
 * Btw i browse the plugin source on trac and came across [this ](http://Shttps://plugins.trac.wordpress.org/browser/woo-related-product-slider/trunk/includes/functions.php)
   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](https://wordpress.org/support/users/paulanzr/)
 * (@paulanzr)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/related-php-styling-css-javascript/#post-10029137)
 * [@aranwer104](https://wordpress.org/support/users/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.
 *  [Peter Lawrenson](https://wordpress.org/support/users/lorro/)
 * (@lorro)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/related-php-styling-css-javascript/#post-10029311)
 * 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.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)

 * 7 replies
 * 3 participants
 * Last reply from: [Peter Lawrenson](https://wordpress.org/support/users/lorro/)
 * Last activity: [8 years, 3 months ago](https://wordpress.org/support/topic/related-php-styling-css-javascript/#post-10029311)
 * Status: resolved