How Do I Make WooCommerce Checkout Look Like Shopify?

There are many reasons why someone might want to make their WooCommerce checkout look like Shopify. Maybe they’re switching from Shopify to WooCommerce, or maybe they just prefer the look of Shopify’s checkout. Either way, it’s easy to do with a few simple HTML tags.

To start, let’s take a look at the default WooCommerce checkout page:

As you can see, the default WooCommerce checkout page is pretty basic. There’s not much going on here besides the form fields and the “Place order” button.

Now let’s take a look at a Shopify checkout page:

As you can see, the Shopify checkout page is much more stylish. It has a nice header with the store name and logo, and the form fields are nicely laid out. There’s also a progress bar that shows the customer where they are in the checkout process.

So how do we make our WooCommerce checkout page look like this? First, we need to add some HTML code to our theme’s functions.php file:

function my_custom_checkout_fields( $fields ) {

$fields['billing']['billing_first_name']['placeholder'] = 'First Name';
$fields['billing']['billing_last_name']['placeholder'] = 'Last Name';
$fields['billing']['billing_address_1']['placeholder'] = 'Address';
$fields['billing']['billing_city']['placeholder'] = 'City';

return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'my_custom_checkout_fields', 10, 1 );

This code will add placeholder text to the First Name, Last Name, Address, and City fields on the checkout page. This is optional, but it helps to make the form fields look nicer.

Next, we need to add some CSS code to our theme’s style.css file:

#order_review {
  background: #fbfbfb;
  padding: 30px;
  margin-top: 30px;
  border: 1px solid #ddd;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; 
}
#order_review h3 {
  margin: 0 0 20px 0; }

This CSS code will style the “#order_review” div on the checkout page. We’re giving it a light grey background color, some padding, and a bottom border. We’re also adding a bit of rounding to the corners with the “border-radius” property.

Now let’s take another look at our checkout page:

As you can see, it’s starting to take shape! We’ve added some placeholder text to the form fields and styled the “#order_review” div with some CSS code.

But there’s still something missing..the header! We can add a header by adding some more HTML code to our theme’s functions.php file:

function my_custom_checkout_header() { ?>
  <div id="order_review">
    <h1>Checkout</h1>
    <!-- Add your store name or logo here -->
    <p>Thank you for your order! </p>
    <!-- Add a message here -->
  </div>
<!-- end #order_review --> <?php }
add_action(
  'woocommerce_checkout_before',
  'my _custom _checkout _header', 10 );

This code will add an “h1” tag with your store name or logo and a “p” tag with a message for your customers. You can change these to whatever you like.

How Do I Make WooCommerce Checkout Look Like Shopify?

9 Related Question Answers Found

Madison Geldart