Adding WooCommerce Cart Button to AMP Theme

What Will I Learn?

This tutorial demonstrates how to add the default WooCommerce shopping cart button to WordPress website running AMP-friendly theme.

Requirements:

• Basic CSS & HTML knowledge;
• Basic PHP knowledge;
• AMP for WordPress (Optional)

Shopping Cart Button in AMP-Friendly Theme Example

At the start, creating AMP and WooCommerce friendly theme, could look like an uphill battle, but steb-by-step it could be achieved. Find the example of the code, which would add shopping cart button to the desired part of your AMP-friendly theme. Further on, if you want to understand the code better – be sure to follow the tutorial through.

Some parts of the code are taken from Isabell Castillo tutorial for non-amp themes.

PHP/HTML Code

<?php if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
   $count = WC()->cart->cart_contents_count;
   ?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart', 'ampire.city' ); ?>"><?php
   if ( $count > 0 ) { ?>
      <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
   <?php } ?></a>
<?php }; ?>

CSS

.cart-contents:before {
   content: '';
   margin-top:8px;
   padding-right:5px;
   vertical-align: bottom;
   width: 24px;
   height: 24px;
   background:url('../images/cart.svg') no-repeat center center/contain;
   display: inline-block;
}
.cart-contents:hover {
   text-decoration: none;
}
.cart-contents-count {
   color: #fff;
   background-color: #2ecc71;
   font-weight: bold;
   border-radius: 10px;
   padding: 1px 6px;
   line-height: 1;
   font-family: Arial, Helvetica, sans-serif;
   vertical-align: top;
}

How it Works

To start things off, it is not required to understand what the code does to get it working, but breaking it down might help to customize it – if you need it. The core of the default shopping cart button code is as it follows.

<?php $count = WC()->cart->cart_contents_count;
   ?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart', 'ampire.city' ); ?>"><?php
   if ( $count > 0 ) { ?>
      <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
   <?php } ?></a>
<?php } ?>

Further on, I added if() to output the code only if WooCommerce plugin is enabled. You can add anything between the lines of the following code, but in our case it is the shopping cart button code from above.

<?php if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
// Your code
} ?>

In conclusion, the combined code will add the shopping cart button to the desired place in the theme, and the count of products added to the shopping cart will be seen. Still, stylizing the button is required for it to be as interactive as most users are accustomed to.

Stylizing Cart Button

In this section, I’m going to show you how to stylize your shopping cart button. Without any further ado, a quick and neat CSS solution could be found below.

.cart-contents:before {
  font-family:WooCommerce;
  content: "\e01d";
  font-size:28px;
  margin-top:10px;
  font-style:normal;
  font-weight:400;
  padding-right:5px;
  vertical-align: bottom;
}
.cart-contents:hover {
   text-decoration: none;
}
.cart-contents-count {
  color: #fff;
  background-color: #2ecc71;
  font-weight: bold;
  border-radius: 10px;
  padding: 1px 6px;
  line-height: 1;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: top;
}

As a result, you can see the cart icon will be rendered from WooCommerce font family. If you want to see all the available cart icon options, download the .zip file from GitHub.com and view demo.html.

Adding Custom Cart Icon

In my case, due to different style, this solution doesn’t satisfy the needs of my client website, thus I have to add a custom icon. Still, I’ll be using the code given above as the basis for my solution.

.cart-contents:before {
   content: '';
   margin-top:8px;
   padding-right:5px;
   vertical-align: bottom;
   width: 24px;
   height: 24px;
   background:url('../images/cart.svg') no-repeat center center/contain;
   display: inline-block;
}

The code should work for anybody, all you need to change is give the correct path to the location, where your custom shopping cart icon is located. Further on, you can stylize the whole setup until your needs are satisfied. In result, the design now looks really neat and it has all the desired functionality.

Developing AMP WooCommerce Website

If you are new to AMP development, or WordPress and WooCommerce, creating a fully working AMP-friendly E-Commerce website might be a pain in the ass. You might even have to customize WooCommerce template files in your AMP theme. If these task alone looks like an uphill battle, consider hiring an AMP development professional.

Originally posted on 10/27/2020
WordPress 5.5.1
AMP 2.0.1
WooCommerce 4.6.1.