How to redesign woocommerce pages

By | January 18, 2020

Are you looking for Woocommerce pages redesigning? Or want to hide some elements on some woocommerce pages?

It’s a general problem for almost all the WordPress designers and developers that they are ordered to change some elements on the woocommerce detail product page or cart & checkout page or sometimes they need to hide some elements on some pages. But hiding that element by applying CSS on the classes hurt all the pages. So what’s the solution for this type of issue?

In this article, I will discuss a small code that I have developed for styling and applying the CSS changes on the woocommerce pages which could not be customized without some paid plugins.

 

Code for the woocommerce pages redesigning.

First of all, you need to install a plugin named “ Simple Custom CSS and JS “ by SilkyPress , after the successful installation you need to follow the below code.

 

//Script for dynamic classes of woocoommerce wordpress

var pathArray = window.location.pathname.split(‘/’);

var path_class = (pathArray[1]+pathArray[2]);

 

jQuery(document).ready(function( $ ){

var newvar = 1;

  if(newvar === 1 ){

    $(‘.your-class-name ‘).addClass(path_class);

    newvar++;

  }

  else {

    $(‘.your-class-name ‘).addClass(path_class+’-‘+newvar);

    newvar++;

  }

});

 

How the above “woocommerce custom designing script ” will work?

First of all, you need to put the above code in the “ Simple Custom CSS and JS” plugin custom js.

 

var pathArray = window.location.pathname.split(‘/’);

It gets the url of the website and breaks it in the portions by / , and gives result in the array chunks.

 

var path_class = (pathArray[1]+pathArray[2]);

I am taking two parameters from the URL which are on 1 and 2 indexes of the URL for making dynamic classes as I can add the CSS to the dynamic classes

jQuery(document).ready(function( $ )

Though this code I have checked that is Jquery loaded in website successfully or not if jquery loaded successfully then run below code.

 

var newvar = 1;

I have simply taken a variable and gave it a value equal to 1 and put the logic that if any page has one class at multiple pages they could differentiate somehow as our custom CSS could not hurt all the divs which have that certain class.

 

$(‘.your-class).addClass(path_class);

I have got the path and add the class, this is the div or element class whom I want to redesign or want to hide,

 

Now I can apply CSS completely to dynamic classes.

 

I hope this script can work for you as per your needs, if you have any question regarding this, let me know. Thank you

 

Cheers.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *