Affiliate
Find Keywords
Make Money
Use WordPress

Woocabado: Method To Enable WooCommerce In Acabado

by Josh Koop | Last Updated: July 22, 2020
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 disclaimer information for more details.

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!

Recommended Reading

  • Acabado: Alternating Flipped Image on Homepage

  • Power Up Acabado By Enabling JQuery

    Jquery within Acabado is disabled by default to maximize page speed, you can enable it with specific plugins that keep changing but include Elementor, etc.

  • Acabado: Make Reflective Hero Image

  • Acabado: Creating A Landing Page With Gutenberg

    When you want to build landing pages people talk about how you need page builders, the thing is though that Gutenberg by itself may be more than good.

  • Acabado: Add 3D Layer Appearance To Your Posts

  • Why Dropship Using Acabado? Diversification and Blogging

    Building a store without paying for ads means providing content which gets people to your website, dropshipping can pay off very well on organic traffic.