Can I Edit A Woocommerce Template Designs

The best thing about WordPress and WooCommerce is code and content can be changed to suit — alter and customize your website entirely.

Flexibility is one of the greatest benefits to using WooCommerce to sell online. Plugins, extensions and themes tin be used to fulfill requirements, so adjusted and coded to tailor the wait and functionality of your site.

Notwithstanding, there are some best practices to follow when making site tweaks, and information technology's not always obvious how these changes must be made.

Why best practices? ↑ Back to tiptop

Many users customize their theme from the default await, changing the link color and also the layout and feel. Most dive direct in and change code, which is the easiest way to exercise information technology. But this leaves the problem of updating in the future, since all modifications are lost when files are overwritten with a new version.

What nosotros want to evidence you in this tutorial are the best ways to customize your theme, and so updating is as painless as possible, and you are in command of customizations.

There are two means to customize:

Plugin — pocket-sized changes
Child theme — major alterations

Using a plugin ↑ Back to top

If you only plan on making minor modifications to the stylesheet or CSS, then the best option is to use a plugin that allows you lot to add custom styling.

Jetpack for CSS or Sass changes ↑ Back to summit

Our recommendation is to use Jetpackfor changes related to CSS or Sass.

Install Jetpack. Once that is done, go to your website > Dashboard > Jetpack > Settings and enable Custom CSS. Custom CSS in Jetpack

Next, you lot tin go to Appearance > Edit CSS. There you'll exist able to add together all your custom CSS styles.

Example

Permit'southward look at an piece of cake example where we use Chrome Dev Tools to observe the navigation link color in the Storefront theme. We inspect the element as follow: right click on the element > inspect, and it will show u.s.a. what the style for the nav element is called.
Chrome Dev Tools Inspect

Nosotros run across in the screenshot above that the style for the link colour in the navigation:
Styles to visible in Chrome Dev Tools

.main-navigation ul li a {   color: #ffffff; } .main-navigation ul li a:hover {   colour: #e6e6e6; }

Then we paste this into custom.css, nosotros want to change the color then to carmine, and the hover colour to white. We likewise remove the other styles which we won't be changing and so it ends upward looking similar this:

.chief-navigation ul li a {   color: crimson; } .main-navigation ul li a:hover {   color: white; }

Once you save custom.css and refresh your page you will notice the nav link color is at present red, and if you hover over it, it will turn white.

You can also add new styles to your the stylesheet to supplement those already in the theme. If the theme e'er gets updated, Jetpack will keep your styles intact. Nosotros always do recommend bankroll upwardly your theme before updating to a newer version, and also bank check out our upgrade tutorial on how to do it.

Code Snippets for PHP ↑ Back to top

The Code Snippets plugin allows you add snippets to your site rather than pasting information technology in the functions.php file, write a brief description so yous know what it does, and actuate or deactivate these snippets equally needed.

Using a child theme ↑ Back to top

If you lot wish to modify the stylesheet or CSS of a pop theme, then the all-time choice is to utilize a child theme to preserve customizations against hereafter updates.

Using a premium child theme ↑ Back to height

Many popular themes have kid themes that tin can be installed and activated to modify the look of the parent theme without coding or styling adjustments. A purchases kid theme shouldnot exist used for custom code but is a manner to change the look of a theme through someone else'southward design. For example, for our Storefront theme, we have quite an extensive catalog of child themes bachelor.

A child theme like this volition not exist a smashing tool for adding custom lawmaking, for the aforementioned reason every bit you should avert adding custom code to the parent theme; if there's an update to the kid theme, all of your custom code will be overridden equally well.

Using a custom child theme ↑ Dorsum to top

Alternatively, you lot tin can create the child theme yourself. This would be like adding a layer on top of your parent theme with the only purpose being to give priority to your custom code and avoiding your lawmaking being discarded at the next update of our parent theme.

You can create your own kid theme using our tutorial; Prepare and use a child theme. More than on how child themes work too on WordPress.org at Child Themes.

Resource ↑ Back to top

Child themes
How to safely add custom code to WordPress
WooCommerce customization tips