Creating a Storefront child theme and modifying the user interface – 3.

This post illustrate that to modify the user interface. To make a good user interface we told in our previous post, to see earlier post click on the link http://blogs.hypatiasoftwaresolutions.in/creating-a-storefront-child-theme-and-modifying-the-user-interface-2/

In this post we tell about how to add w3css in the theme and also purpose of function for what and why it is used, so let start :-
All the below function can be written in function.php file.

    1. This function is used for menu section.
      <?php
      add_filter('nav_menu_css_class','auto_custom_type_class', 10,2);
      function auto_custom_type_class($classes, $item){
      //if($item->type_label == "CUSTOM_TYPE_NAME")
      {
      $classes[] = " w3-yellow w3-round-xxlarge";
      }
      if( in_array('current-menu-item', $classes) )
      {
      $classes[] = '  ';
      }
      return $classes;
      }
      ?>
    2. To remove the single product page image from the site write this action :-
      remove_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_images’, 20 );
    3. To write anything above the name of product in the single product page. :-
      add_action( ‘woocommerce_single_product_summary’, ‘showProductImage’, 20 );
      {
      function showProductImage() {
      echo “Hi Rishabh”;
      }
      }
       
    4. To add css in name of the product in shop page write this :-
      add_action(‘woocommerce_shop_loop_item_title’, ‘change_product_title’);
      function change_product_title() {
      echo'<header class=”entry-header”><h1 class=”entry-title w3-teal w3-round-xlarge “>’.get_the_title().'</h1></header>’;
      }
    5. This action is used for remove product image from the site :-
      remove_action(‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_template_loop_product_thumbnail’, 10);
    6. This action is used for to show the image thumbnail :-
      if(!is_user_logged_in())
      add_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_template_loop_product_thumbnail’, 10);if ( ! function_exists( ‘woocommerce_template_loop_product_thumbnail’ ) ) {
      function woocommerce_template_loop_product_thumbnail() {
      echo woocommerce_get_product_thumbnail();
      }
      }
    7. To add css in the cart popdown view, also show in mobile view to spin the image in shop page
      if ( ! function_exists( ‘woocommerce_get_product_thumbnail’ ) ) {
      function woocommerce_get_product_thumbnail( $size = ‘shop_catalog’, $placeholder_width = 0, $placeholder_height = 0 ) {
      global $post, $woocommerce;
      $output = ‘

      ‘;

      if ( has_post_thumbnail() ) {
      $output .= get_the_post_thumbnail( $post->ID, $size );
      }
      $output .= ‘ ‘;
      return $output;
      }
      }

Leave a Reply