Меняем вид корзины WooCommerce

По умолчанию у нас за вид страницы корзины отвечает шаблон page.php в корне нашей темы. Мы можем изменить этот файл, либо создать свой шаблон для корзины, но тогда в свойствах страницы нам нужно будет указать нужный шаблон.

По умолчанию page.php выглядит так:

page.php

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package DostavkaElki
 */

get_header();
?>

	<main id="primary" class="site-main">

		<?php
		while ( have_posts() ) :
			the_post();

			get_template_part( 'template-parts/content', 'page' );

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) :
				comments_template();
			endif;

		endwhile; // End of the loop.
		?>

	</main><!-- #main -->

<?php
get_sidebar();
get_footer();

Меняем его, но учтите, что внесенные изменения будут применены ко всем страницам, которые используют шаблон "Шаблон по умолчанию", если мы хотим, что бы поменялась только корзинга, то тогда нам нужно создать новый шаблон именно только для корзины. В данном примере мы будем менять общий шаблон для страниц page.php.

Новый page.php 

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package DostavkaElki
 */

get_header();
?>





	<div class="uk-page-001">
		<div class="uk-page-001-content uk-margin-auto">
			<div class="uk-page-001-bannerblock uk-page-001-katalog-bannerblock uk-flex uk-flex-column uk-flex-between" style="background-image: url(/wp-content/themes/dostavkaelki/assets/images/mainfon_page.jpg);">
			<div class="uk-page-001-title">
			<h1 class="uk-page-001-title-maintext"><?php single_post_title(); ?></h1>
			</div>
			</div>
		</div>
	</div>





    <div class="uk-page-002">
		<div class="uk-page-002-content uk-margin-auto" style="text-align: justify;">
            
		<?php
		while ( have_posts() ) :
			the_post();

			get_template_part( 'template-parts/content', 'page' );

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) :
				comments_template();
			endif;

		endwhile; // End of the loop.
		?>
			
        </div>
    </div>






    <div class="uk-separator"></div>





<?php
get_footer();

На этом все, добавляем только стили для нашей страницы "Корзина". 

Примеры стилизации

Пример 1

/*СТИЛИ КОРЗИНЫ*/
#post-12 .entry-title {
	display: none;}
#post-12 .entry-footer {
	display: none;}
#post-12 p.return-to-shop {
	margin: 10px 0;}
#post-12 a.wc-backward {
	background-color: #008036;
    color: #ffffff;
    text-shadow: 0px 0px 20px white;
	transition: 0.5s;}
#post-12 a.wc-backward:hover {
    box-shadow: 0px 0px 10px 0px #00000073;
    transition: 0.5s;}
.woocommerce a.remove {
    display: block;
    font-size: 27px;
    padding: 0 3px 4px 3px;
    height: 1em;
    width: 1em;
    text-align: center;
    line-height: 1;
    border-radius: 100%;
    color: red!important;
    text-decoration: none;
    font-weight: 700;
    border: 0;}
.woocommerce a.remove:hover {
    color: red!important;
    background: #008036;}
td.product-name a {
	font-size: 20px;
    color: #000000;}
td.product-price span {
	font-size: 20px;
    color: #000000;
	font-weight: 500;}
.woocommerce .quantity .qty {
    width: 3.631em;
    text-align: center;
    font-size: 20px;
    border: 2px solid #008036;
    border-radius: 5px;}
td.product-subtotal span {
	font-size: 20px;
    color: #000000;
	font-weight: 500;}
tr.cart-subtotal span {
	font-size: 20px;
    color: #000000;
	font-weight: 500;}
tr.order-total span {
	font-size: 20px;
    color: #000000;
	font-weight: 700;}
/*Доступная кнопка
.wc-proceed-to-checkout a.checkout-button {
	background-color: #008036!important;
    color: #ffffff!important;
    text-shadow: 0px 0px 20px white;
	transition: 0.5s;}*/
/*Заблокированная кнопка*/
.wc-proceed-to-checkout a.checkout-button {
    background-color: #008036!important;
    color: #ffffff;
    text-shadow: 0px 0px 20px white;
    transition: 0.5s;}
.wc-proceed-to-checkout a.checkout-button:hover {
    box-shadow: 0px 0px 10px 0px #00000073;
    transition: 0.5s;}
p.woocommerce-shipping-destination {
	display: none;}

Пример 2

/*СТИЛИ КОРЗИНЫ*/
#post-13 .entry-title {
	display: none;}
#post-13 .entry-footer {
	display: none;}
#post-13 p.return-to-shop {
	margin: 10px 0;}
#post-13 a.wc-backward {
	text-decoration: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 270px;
    height: 50px;
    font-family: Verdana;
    font-size: 17px;
    line-height: 1.3;
    border: 2px solid #a2000d;
    background-color: #a2000d;
    color: #ffffff;
    transition: 0.5s;}
#post-13 a.wc-backward:hover {
    box-shadow: 0 0 15px 6px #0000001f;
    transition: 0.5s;}
.woocommerce a.remove {
    display: block;
    font-size: 27px;
    padding: 0 3px 4px 3px;
    height: 1em;
    width: 1em;
    text-align: center;
    line-height: 1;
    border-radius: 100%;
    color: #000000!important;
    text-decoration: none;
    font-weight: 700;
    border: 0;}
.woocommerce a.remove:hover {
    color: #ffffff!important;
    background: #a2000d;}
td.product-name a {
	font-size: 20px;
    color: #000000;
	transition: 0.5s;}
td.product-name a:hover {
    color: #a2000d;
    transition: 0.5s;}
td.product-price span {
	font-size: 20px;
    color: #000000;
	font-weight: 500;}
.woocommerce .quantity .qty {
    width: 3.631em;
    text-align: center;
    font-size: 20px;
    border: 2px solid #a2000d;
    border-radius: 5px;}
td.product-subtotal span {
	font-size: 20px;
    color: #000000;
	font-weight: 500;}
tr.cart-subtotal span {
	font-size: 20px;
    color: #000000;
	font-weight: 500;}
tr.order-total span {
	font-size: 20px;
    color: #000000;
	font-weight: 700;}
/*Доступная кнопка
.wc-proceed-to-checkout a.checkout-button {
	background-color: #008036!important;
    color: #ffffff!important;
    text-shadow: 0px 0px 20px white;
	transition: 0.5s;}*/
/*Заблокированная кнопка*/
.wc-proceed-to-checkout a.checkout-button {
    text-decoration: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Verdana;
    font-size: 17px;
    line-height: 1.3;
    border: 2px solid #a2000d;
    background-color: #a2000d!important;
    color: #ffffff;
    transition: 0.5s;}
.wc-proceed-to-checkout a.checkout-button:hover {
    box-shadow: 0 0 15px 6px #0000001f;
    transition: 0.5s;}
p.woocommerce-shipping-destination {
	display: none;}

Кроме этого добавим стилистику для сообщений как в корзине так и на странице оформления заказа.

CSS

/*СТИЛИ ДЛЯ СООБЩЕНИЙ*/
a.shipping-calculator-button {
	color: #a2000d;}
.woocommerce-message {
    border-top-color: #a2000d!important;}
.woocommerce-message::before {
    color: #a2000d!important;}
.woocommerce-info {
    border-top-color: #a2000d!important;
	line-height: 1;}
.woocommerce-info::before {
    color: #a2000d!important;}