Woocommerce Custom CSS Documentation

Getting Started

Minimum System Requirements

  • Apache Web Server
  • PHP 5.3+
  • WordPress 3.5+
  • MySQL version 5.0 or greater

Minimum PHP Requirements

  • WordPress Memory Limit 64MB or more
  • PHP Safe Mode Disabled
  • PHP Max Execution Time 30 seconds or more
  • PHP Memory Limit 128MB or more
  • cURL Library Enabled
  • cURL Timeout 300 seconds or more
Back To Top

Installing Woocommerce Custom CSS

  1. First things first, go to Plugins > Add New.
  2. Upload the .zip plugin file and activate the plugin.
  3. Yep, that’s it! For more help with installing plugins, take a look at this quick guide.
Back To Top

Updating Woocommerce Custom CSS Plugin

Backup your website!

Before updating your theme, please make sure you are running the latest version of WordPress. It is also a good idea to make sure you have a backup of your site. Backup WordPress is a useful plugin to help you do this. To learn more about backing up your WordPress website please see the Codex here: WordPress Backups Codex

Backwards compatibility

We try to be very careful to make the updates by maintaining a backward compatibility and thus no content or options will (and should not) be lost after performing a theme update. Again, backup to make sure you won’t have to worry about that, however if you do seem to find any problem, please start a new topic on our support forums and we’ll dig deeper into the problem and investigate it.

 

Automatic updates

Zxeion Developers will soon come with a built-in update system that notifies you in the standard WordPress way of any plugin update (In Plugins > Installed Plugins).

Manual Updates

There are a few different ways to manually update your plugin depending on your specific situation.

Download latest version of Woocommerce CSS

Zxeion Products can be downloaded from your ThemeForest’s account > Downloads section. You will basically download a package containing Woocommerce Css Plugin, Documentation.

Update by uploading new version

The easiest way to manually update your theme is to upload it via the WP dashboard.

  1. Go to Plugins > Installed Plugins > Add New > Upload
  2. Click Browse and select the zip file
  3. Click Install Now

You will most likely GET the following error: File Already Exists 

The reason we get this error is because you already have Woocustomcss folder on your server with the same name as the folder inside your ZIP file.

You can use Easy Theme and Plugin Upgrades plugin or do one of the following:

A. Rename the folder

You can either rename the theme folder on your server, or rename the folder inside the zip file.

  1. Unzip the file on your computer
  2. Rename the folder (e.g. woocustomcss-new”). The folder name must not have spaces in it.
  3. Compress the new folder to a ZIP file
  4. Upload it via Go to Plugins > Installed Plugins > Add New > Upload
  5. Go to Plugins > Themes and activate the new version
B. Delete the plugin on your server

If you have done any customisations to your plugin files, these customisations will be lost if you use this method. If you have not done customisations to the plugin:

  1. Go to Plugins > Installed Plugins
  2. Deactivate Plugin
  3. Delete the old version
  4. Upload it via Go to Plugins > Installed Plugins > Add New > Upload zip
  5. Activate the new version
Back To Top

Setting Options

Basically, settings panel divided in 8 main parts

  • All Pages
  • Product Category
  • Shop Page
  • Product Page
  • Cart Page
  • Checkout Page
  • Account Page
  • Import & Export
Back To Top

What is custom css?

CSS stands for Cascading Style Sheets and is a language used to identify and describe how content looks on a page written in HTML. W3Schools defines it quite nicely: “Styles define how to display HTML elements.”

Within WordPress, CSS works just as it would on any other website. You have your main CSS file (style.css) that dictates all of the aesthetic and formatting elements for your theme. Then, you have bits of CSS code within your main PHP files which reference the stylesheet and tell the site where to put what.

All of the HTML elements in the theme will have rules laid out in CSS to customize the layout. All WordPress themes rely on CSS to create a polished look with consistent fonts, styles, and formatting. You can think of CSS as the instructions for your site. You have your functions.phpheader.phpsidebar.php, and so on. But it’s not until style.css gets into the mix that these PHP files know how to put the site together.

Back To Top

How custom css works?

  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files
Back To Top

Minifying CSS Option

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser – e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on. This will improve the speed at which your css is delivered to your browser. We Recommend Enabling this if page speed is important to you. 

Location:

Woocommerce CSS > General Settings

Back To Top

Effecting View mobile only with css

The @media query is 1/3 of the recipe for responsive design. It is the key ingredient that, in it’s simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria.

The following is the css for mobiles. View More Devices

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
Back To Top

How to change css styles?

Example

Let’s look at an easy example where we use Chrome Dev Tools to find the navigation link color in the Storefront theme. We inspect the element as follow: right click on the element > inspect, and it will show us what the style for the nav element is called.
Chrome Dev Tools Inspect

We see in the screenshot above that the style for the link color in the navigation:
Styles to visible in Chrome Dev Tools

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

Then we paste this into custom.css, we want to change the color so to red, and the hover color to white. We also remove the other styles which we won’t be changing so it ends up looking like this:

.main-navigation ul li a {
  color: red;
}
.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 now red, and if you hover over it, it will turn white.

Changes after applying custom CSS
Changes after applying custom CSS
Back To Top

Where to i add my css code?

Once you have found the css style you want to change go to Woocommerce css and paste the code into the text box of the section you want to effect.

Available CSS Sections:

  • All Pages
  • Product Category
  • Shop Page
  • Product Page
  • Cart Page
  • Checkout Page
  • Account Page
Back To Top

All Pages CSS Option

If you put css into the all pages section on woocommerce css plugin it will apply that code to all woocommerce based pages which includes:

  • Product Category
  • Shop Page
  • Product Page
  • Cart Page
  • Checkout Page
  • Account Page
Back To Top

Product Category CSS Option

If you put css into the product category section on woocommerce css plugin it will only apply that code to the following page type:

  • Product Category
Back To Top

Shop Page Option

If you put css into the shop section on woocommerce css plugin it will only apply that code to the following page type:

  • Shop Page (Example – Domain.com/shop)
Back To Top

Product Only Css Option

If you put css into the product section on woocommerce css plugin it will only apply that code to the following page type:

  • All Product Pages
Back To Top

Cart CSS Option

If you put css into the cart section on woocommerce css plugin it will only apply that code to the following page type:

  • Cart Page (Example – domain.com/cart)
Back To Top

Checkout CSS Option

If you put css into the checkout section on woocommerce css plugin it will only apply that code to the following page type:

  • Checkout Page (Exmaple – domain.com/checkout)
Back To Top

Account Page CSS Option

If you put css into the account section on woocommerce css plugin it will only apply that code to the following page type:

  • Account Page (Example.com/my-account)
Back To Top

Import / Export

Exporting Options 

Here you can copy/download your current option settings. Keep this safe as you can use it as a backup should anything go wrong, or you can use it to restore your settings on this site (or any other site). Available export options can be used in the import.

  • Copy Data
  • Download Data File
  • Copy Export URL

Importing Options 

This will overwrite all existing option values, please proceed with caution!

  • Import from file – This export data can be obtained from the export option Copy Data
  • Import from url – This export data can be obtained from the export option Copy Export Url
Back To Top