Change checkout Order layout

[maittaleb01]

Hi,

1. In the “Your Order” table i want to seperate  the ”shipping method area”  from the rest of the table.
2. In the ”’shipping table”  the title ”Shipping” should be on top. That way in mobile it would still look nice.  See attachment for better visual explanation.

Attachments:

You must be logged in to view attached files.

[maittaleb01]

3.  I also want to to have the same ”shipping layout”  on cart page.

[Harry]

Hi,

I’m sorry the layout of shipping and on checkout page and cart page generate by plugin WooCommerce and it is a row of table and can’t change it as table in row.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[maittaleb01]

This reply has been marked as private.

[Harry]

Hi,

Please add code below to file order-review.php

<?php
	$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );
	if ( ! $_product->is_visible() ) {
	echo wp_kses_post( $thumbnail );
	} else {
		printf( '%s', $thumbnail );
	}
?>

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[maittaleb01]

Hi,

It works but there are few things that i have to edit. The file  review-order.php  that i used as template, i got it from woocommerce plugin  template. But it doesnt have the customized claue css classes and to takes to much time to edit.  I need the review-order.php template from claue theme but i dont know were to find it.

[Harry]

Hi,

Our theme doesn’t override this file, it in plugin.

Please copy the file review-order.php in folder plugins > wpa-woocommerce-product-bundle > includes > woocommerce > checkout to claue-child > woocommerce > checkout

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[maittaleb01]

Hi thank you that works.

4.  At checkout billing field i would like to have billing_address_1   and_billing_address 2 field on the same line.  Just like  with first name and last name.   These field dont need that much space

5. I would like billing_city  and billing_postcode field on the same line also.

[maittaleb01]

6. The Country field is a bit smaller in height compared to other field. I would like  to have it the same style as other fields

[Harry]

Hi,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

#billing_address_1_field,
#billing_postcode_field {
	width: 49%;
	display: inline-block;
	margin-right: 2%;
}
#billing_address_2_field,
#billing_city_field {
	width: 49%;
	display: inline-block;
}
.checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 40px;
	right: 5px;
}
.checkout .select2-container--default .select2-selection--single {
	border: 1px solid #ccc;
	border-radius: 0;
	height: 40px;
}
.checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 40px;
	padding: 0 15px;
}

@media only screen and (max-width: 736px) {
#billing_address_1_field,
#billing_postcode_field,
#billing_address_2_field,
#billing_city_field {
	width: 100%;
	margin-right: 0;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts