CODEWITHSUNDEEP
phpwordpresstemplateswoocommercewordpress-theming
Ajmal Razeel
Ajmal Razeel

Reputation: 1701

Change checkout page in WooCommerce

I have a developed an e-commerce website with WordPress and WooCommerce plugin. Everything has been done but I want to change the complete layout of the checkout page. I tried finding a plugin to do that but failed.

Is there any way by which I can change the layout or the design of the checkout page?

Upvotes: 2

Views: 6753

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 254378

EDITED:

THE WOOCOMMERCE TEMPLATES:

You can copy the "templates" folder (located inside the woocoommerce plugin folder) to your theme (or child theme) folder and rename it "woocommerce".
Then you can chose inside which file you want to edit to feet your needs.

In your case you will find inside a folder named "checkout". All the files inside this "checkout" folder are the different components of the checkout page layout.

Different files responsible for components on checkout page/form

form-checkout.php is the primary file called for checkout page.
form-login.php renders the login form.
form-coupon.php renders the coupon form.
form-billing.php renders the billing form.
form-shipping.php renders the shipping form. (this is displayed when "ship to different address checkbox is checked)
review-order.php renders the order review block.
payment.php renders payment options block.
payment.php has a loop in which for each enabled payment method another file > payment-method.php is called.
cart-errors.php displays cart error.
thankyou.php is called for displaying order received confirmation. ("order-received" endpoint)


ADDING WOOCOMMERCE STYLE SHEET IN CHILD THEME FOR EASY MODIFICATION
Because some times is very difficult to overrides some specific WooCommerce styles.

Step.1 - Disable the general woocommerce.css file.

Add this PHP code to your active theme's functions file (functions.php):

add_filter( 'woocommerce_enqueue_styles', 'wooc_dequeue_styles' );

function wooc_dequeue_styles( $enqueue_styles ) {
    unset( $enqueue_styles['woocommerce-general'] );
    return $enqueue_styles;
}


Step.2 - Create a new folder inside your active theme's folder named "woocommerce" (if it doesn't exist yet).

Step.3 - Copy the woocommerce.css file into this newly created folder woocommerce in your active theme's folder.
The woocommerce.css file is located in: plugins/woocommerce/assets/css/woocommerce.css.

Step.4 - Enable (enqueue) the general woocommerce.css file in your active theme.

Add this PHP code to your active theme's functions file:

add_action('wp_enqueue_scripts', 'woocommerce_style_sheet');

function woocommerce_style_sheet() {
    wp_enqueue_style( 'woocommerce', get_stylesheet_directory_uri() . '/woocommerce/woocommerce.css' );
}

Options:

— You can also enable/disable others woocommerce css files: see this snippet at woo themes

— You can disable ALL Woocommerce style sheets at once:

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

Upvotes: 2

Related Questions