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:

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

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

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

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.

Adding car menu to header navigation

As you can see the cart is working, but it requires some styling from the front-end perspective.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

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.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

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.

As you can see, the shopping cart icon nows blends with the rest of the website’s design.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

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.

Happy Clients

Enjoying ultra-fast mobile-first AMP websites for their competitive businesses.