Back to top

Affiliate Link: Looking to Monetize With Ads?? We Personally Use:

Ezoic

How To Enable WooCommerce In Acabado

Running WooCommerce on your website gives you control, in Acabado though the features necessary to run WooCommerce aren't in the main theme. We have enabled them and they run

As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

One of the things which have driven people crazy with Acabado is the fact that WooCommerce won’t load, this makes it near impossible to have an “on-site” storefront. Today I show you how to enable WooCommerce In Acabado using the plugin Code Snippets to enable the requirements and clean up the front end display for your users.

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

Please note this will require the plugin Code Snippets as you need to inject the theme support functionality for WooCommerce. This is the major reason why this doesn’t function in the theme by default, it could be added to functions.php but you would then have to add it every time you updated the theme manually.

Requires Jquery Code Snippet

Please read and install this code snippet first

Code To Add WooCommerce

If you don’t want to add Code Snippets I’ll give you the one part you HAVE to add to functions.php to add the functionality which allows WooCommerce to function.

Adding via Functions.php Theme Edit

  1. Click on [ Appearance ]
  2. Click On [ Theme Editor ]
  3. From The Right Menu Find [ Functions.php ]
  4. Scroll to the end and add the following code block
function WooCommerce_In_Acabado() {
	add_theme_support( 'woocommerce' );
}

add_action( 'after_setup_theme', 'WooCommerce_In_Acabado' );

Add Stripe To Header.php (For Payments)

  1. Click on [ Appearance ]
  2. Click On [ Theme Editor ]
  3. From The Right Menu Find [ Header.php ]
  4. Scroll to the end and add the following code block
<script src="https://js.stripe.com/v3/"></script>

Custom CSS To Make Styles Similar to Acabado (Buttons)

Once you enable WooCommerce for the theme the Custom CSS below helps to style the buttons to match the rest of the Acabado theme setup with black buttons and white text.

.woocommerce ul.products li.product .button {
    	margin-top: 1em;
    	width: max-content;
    	background-color: #515151;
}
									
a.button.wc-backward {
    margin-top: 1em;
    width: max-content;
    background-color: #515151;
}
									
.woocommerce span.onsale {
    width: 50px;
    height: 50px;
    background-color: #5be05d;
    color: #fff;
}
									
a.button.wc-forward {
    margin-top: 1em;
    width: max-content;
    background-color: #515151;
}
									
.woocommerce button.button {
    width: max-content;
    background-color: #515151;
}
									
.woocommerce button.button:hover {
    width: max-content;
    background-color: #05cc14;
}
									
.woocommerce #review_form #respond .form-submit input {
    left: auto;
    width: max-content;
    background-color: #515151;
}
		   

		   
@media (min-width: 960px) {
.woocommerce-page .widget-area {
    float: left;
    width: calc(25% - -6px);
    padding-left: 0px;
    border-left: 0px solid #f0f0f0;
	}
	.woocommerce-page .site-main {
    width: calc(75% - 15px);
    float: right;
    padding-left: 15px;
}

 
}
@media (min-width: 576px) and (max-width: 959px){
.woocommerce-page .widget-area {
    width: calc(100% - -6px);
    padding-left: 0px;
    display: inline-block;
    border-left: 0px solid #f0f0f0;
}
.woocommerce-page .site-main {
    width: calc(100% - 0px);
    float: left;
    padding-left: 0px;
}
}


.site-content .widget-area button {
    display: -webkit-inline-box;
    margin: 0 auto;
}

.widget-title {
    border-radius: 3px;
    padding: 5px;
}
		   
.woocommerce .cart .button, .woocommerce .cart input.button {
    float: none;
    background-color: #363940 !important;
    width: max-content;
}
		   
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
    background-color: #84878c;
    text-decoration: none;
    background-image: none;
}

/* Buttons Color */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
    float: none;
    background-color: #363940 !important;
    width: max-content;
}
		   
/* FIX WOOCOMMERCE BREADCRUMBS */
.woocommerce .woocommerce-breadcrumb {
    text-align: left;
    margin-top: 0px;
    margin-bottom: 40px;
    color: #fff;
    text-transform: uppercase;
    background: #363940;
    border-radius: 3px;
    padding: 5px;
    padding-left: 15px;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    font-weight: 800;
    font-size: 1.125rem;
}

.woocommerce .woocommerce-breadcrumb a {
    color: #ffffff;
}
		   
h1.page-title {
    text-align: center;
    margin-top: 0;
    color: #fff;
    text-transform: uppercase;
    background: #363940;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 1.125rem;
    padding: 5px 0px;
}

Adding via Code Snippets Plugin

The code snippet includes the code to enable WooCommerce plus the needed styles for buttons to make it fit the Acabado theme overall.

  1. Install [ Code Snippets ] Plugin
  2. Two Available Installs Are Available
    1. Import JSON Snippet
      • Select [ Snippets ] Then [ Import ]
      • Click [ Snippets ] Then [ All Snippets ]
      • Find [ Enable WooCommerce In Acabado ] Click the radio button to green for enabled
    2. Create Snippet Manually (Linked to full code below)
      • Select [ Snippets ] Then [ Add New ]
      • Title: Enable WooCommerce In Acabado
      • Paste Code From Below
      • Click [ Save and Activate ]

Download The Importable Code Snippet (Right Click Save As) – HERE

Manual Code For New Code Snippet Creation

function WooCommerce_In_Acabado() {
	add_theme_support( 'woocommerce' );
}

add_action( 'after_setup_theme', 'WooCommerce_In_Acabado' );

add_action( 'wp_head', function () { ?>
	<script src="https://js.stripe.com/v3/"></script>
	<style>

		.woocommerce ul.products li.product .button {
    		margin-top: 1em;
    		width: max-content;
    		background-color: #515151;
		}
									
		a.button.wc-backward {
    		margin-top: 1em;
    		width: max-content;
    		background-color: #515151;
		}
									
		.woocommerce span.onsale {
    		width: 50px;
    		height: 50px;
			background-color: #5be05d;
    		color: #fff;
		}
									
		a.button.wc-forward {
    		margin-top: 1em;
    		width: max-content;
    		background-color: #515151;
		}
									
		.woocommerce button.button {
			width: max-content;
			background-color: #515151;
		}
									
		.woocommerce button.button:hover {
			width: max-content;
    		background-color: #05cc14;
		}
									
		.woocommerce #review_form #respond .form-submit input {
    left: auto;
    width: max-content;
    background-color: #515151;
}
		   
/* Buttons Color */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
    float: none;
    background-color: #363940 !important;
    width: max-content;
}
		   
	@media (min-width: 960px) {
 
.woocommerce-page .widget-area {
    float: left;
    width: calc(25% - -6px);
    padding-left: 0px;
    border-left: 0px solid #f0f0f0;
	}
	.woocommerce-page .site-main {
    width: calc(75% - 15px);
    float: right;
    padding-left: 15px;
}

 
}
	@media (min-width: 576px) and (max-width: 959px){
		.woocommerce-page .widget-area {
    width: calc(100% - -6px);
    padding-left: 0px;
    display: inline-block;
    border-left: 0px solid #f0f0f0;
}
		.woocommerce-page .site-main {
    width: calc(100% - 0px);
    float: left;
    padding-left: 0px;
}
	}


.site-content .widget-area button {
    display: -webkit-inline-box;
    margin: 0 auto;
}

.widget-title {
    border-radius: 3px;
    padding: 5px;
}
		   
		   .woocommerce .cart .button, .woocommerce .cart input.button {
    float: none;
    background-color: #363940 !important;
    width: max-content;
}
		   
		   .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
    background-color: #84878c;
    text-decoration: none;
    background-image: none;
}
		   
		   /* FIX WOOCOMMERCE BREADCRUMBS */
.woocommerce .woocommerce-breadcrumb {
    text-align: left;
    margin-top: 0px;
    margin-bottom: 40px;
    color: #fff;
    text-transform: uppercase;
    background: #363940;
    border-radius: 3px;
    padding: 5px;
    padding-left: 15px;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    font-weight: 800;
    font-size: 1.125rem;
}

.woocommerce .woocommerce-breadcrumb a {
    color: #ffffff;
}
		   
		   h1.page-title {
    text-align: center;
    margin-top: 0;
    color: #fff;
    text-transform: uppercase;
    background: #363940;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 1.125rem;
    padding: 5px 0px;
}

	</style>
<?php } );

Download WooCommerce

After you have enabled the above then you can go download the plugin from the repository and install the plugin, go through the setup and start to build out your shop.

Adding Pages To Main Menu

WooCommerce creates all the pages you need for your customers to add items and make purchases. Currently, I haven’t found a good way to inject the shopping cart and that will come with more time, for now adding them to the menu will help people reach them as needed. (Also add my account and cart pages to the footer menu for safety sake)

Pages WooCommerce Creates:

  • Shop
  • Cart
  • Checkout
  • My Account

Adding Shopping Cart and Cost To Menu

If you would like to add a shopping cart with prices to your menu I would suggest adding the following plugin:

[ WooCommerce Menu Cart ]

If you find a post helpful and feel like rewarding my effort with the price of a beer, please donate here

Updates

  • 1/7/2019 – Updated Code for the Cart Page Updates and apply Coupon
  • 12/20/2019 – Added Code To Better serve page on mobile by moving the sidebar to the bottom below the shop content display.

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

2 thoughts on “How To Enable WooCommerce In Acabado

  1. Hello!

    Thank you for all your help with the Acabado theme šŸ™‚

    I was wondering … is there a way to move the homepage hero slider below the featured tiles?

    Thank you!

    1. Not in a very clean way, since they are separate from each other this would mean needing to recode the homepage in the theme files, and this would be something you would have to do on each theme upgrade for the rest of time. Why are you wanting to move it as it would make it not very effective to have and I would then just disable it.

Leave a Reply

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

Recent Content