Woocabado: Method To Enable WooCommerce In Acabado

Please Note: This comes with no support from myself or from Income School as it is only a proof that the ability exists to run Woocommerce within Acabado while maintaining the speed benefits. Use at your own risk, I don’t have the ability to make updates to this content.

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.

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;
}


.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
    float: none;
    background-color: #363940 !important;
    width: max-content;
}
		   

.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;
}
		   

.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;
}
		   
		   
.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 ]

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.

I love technology, I have plenty of technical side experience but never really thought of blogging as a way to earn an income. With everything that has gone on in the last couple years and the instability of the job markets I started to learn how to blog and build affiliate niche sites to add more income channels to give me the chance to break free from the financial chains that bind me and find real freedom!