Меняем вид корзины 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;}

Пример изменения вида корзины после обновления WooCommerce 12-2023

Шаблон для корзины, в данном случае используется 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="container-page-001 overlay-black" style="background-image: url(/wp-content/themes/zotstore/assets/images/cat_fon.jpg);">
		<div class="container-page-001-content">
		
			<div class="container-page-001__text">
				<p class="container-page-001__text-maintxt">
					<?php single_post_title(); ?>
				</p>
				<p class="container-page-001__text-txt">
					Lorem ipsum dolor sit amet consectetur adipisicing, elit. Natus impedit consequuntur, veritatis hic voluptate iste sapiente at, sunt repudiandae, officiis qui cupiditate dicta quia, saepe quibusdam eaque doloremque reprehenderit aut.
				</p>
				<div class="container-page-001__text-link">
					<a class="container-001__slide-text-link-lnk" href="">Получить консультацию</a>
				</div>
			</div>

			<div class="container-page-001__breadcrumbs">
				<?php if( function_exists('kama_breadcrumbs') ) kama_breadcrumbs(' // '); ?>
			</div>

		</div>
	</div>





    <div class="container-page-002">
		<div class="container-page-002-content uk-margin-auto" style="text-align: justify;">  
			<?php the_content(); ?>
        </div>
    </div>





<?php
get_footer();

Приведу пример CSS для внутренних страниц, т.к. шаблон для корзину идентичен ему.

CSS для внутренних страниц

/*СТИЛИ ДЛЯ ВНУТРЕННИХ СТРАНИЦ*/
.container-page-001 {
    padding: 100px 0 0 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;}
.container-page-001-content {
    position: relative;
    width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 40px 10px 40px 10px;}
.container-page-001__text {
    width: 50%;}
.container-page-001__text-maintxt {
    margin: 0;
    font-family: Alaskan;
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;}
.container-page-001__text-txt {
    width: 550px;
    margin: 30px 0;
    font-family: Alaskan;
    font-size: 18px;
    line-height: 1;
    color: #ffffff;}
.container-page-001__text-link a.container-001__slide-text-link-lnk {
    text-decoration: none;
    margin: 0;
    width: 270px;
    height: 45px;
    border-radius: 10px;
    background-color: #ffd33f;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Alaskan;
    font-size: 20px;
    line-height: 1;
    color: #000000;
    transition: 0.5s;}
.container-page-001__text-link a.container-001__slide-text-link-lnk:hover {
    background-color: #000000;
    color: #ffd33f;
    transition: 0.5s;}

.container-page-001__breadcrumbs {
    margin: 20px 0 0 0;
    display: flex;}
.container-page-001__breadcrumbs a.container-page-001__breadcrumbs-item-link {
    margin: 0;
    text-decoration: none;
    font-family: Alaskan;
    font-size: 20px;
    line-height: 1;
    color: #ffffff;
    transition: 0.5s;}
.container-page-001__breadcrumbs a.container-page-001__breadcrumbs-item-link:hover {
    color: #ffd33f;
    transition: 0.5s;}
.container-page-001__breadcrumbs p.container-page-001__breadcrumbs-item-sep {
    margin: 0 5px;
    font-family: Alaskan;
    font-size: 20px;
    line-height: 1;
    color: #ffffff;}
.container-page-001__breadcrumbs p.container-page-001__breadcrumbs-item-text {
    margin: 0;
    font-family: Alaskan;
    font-size: 20px;
    line-height: 1;
    color: #ffffff;}

.kama_breadcrumbs a {
	margin: 0;
    text-decoration: none;
    font-family: Alaskan;
    font-size: 20px;
    line-height: 1;
    color: #ffffff;
    transition: 0.5s;}
.kama_breadcrumbs a:hover {
    color: #ffd33f;
    transition: 0.5s;}
.kama_breadcrumbs span.kb_sep {
    margin: 0 5px;
    font-family: Alaskan;
    font-size: 20px;
    line-height: 1;
    color: #ffffff;}
.kama_breadcrumbs span.kb_title {
    margin: 0;
    font-family: Alaskan;
    font-size: 20px;
    line-height: 1;
    color: #ffffff;}

@media (max-width: 1200px) {
.container-page-001-content {
    width: 100%;}
.container-page-001__text {
    width: 60%;}
.container-page-001__text-txt {
    width: 90%;}}
@media (max-width: 992px) {}
@media (max-width: 768px) {
.container-page-001__text {
    width: 100%;}
.container-page-001-content {
    display: flex;
    flex-direction: column;
    align-items: normal;}
.container-page-001__breadcrumbs {
    position: relative;
    bottom: 0;
    left: 0;
    display: flex;
    margin: 30px 0 0;}}
@media (max-width: 576px) {
.container-page-001__text-maintxt {
    font-size: 40px;}
.container-page-001__text-txt {
    font-size: 15px;}}
@media (max-width: 400px) {}





.container-page-002 {}
.container-page-002-content {
    position: relative;
    width: 1200px;
    margin: auto;
    display: flex;
	flex-direction: column;
    padding: 40px 10px 40px 10px;}

@media (max-width: 1200px) {
.container-page-002-content {
    width: 100%;}}
@media (max-width: 992px) {}
@media (max-width: 768px) {}
@media (max-width: 576px) {}
@media (max-width: 400px) {}

А это стили непосредственно для элементов корзины.

CSS для элементов корзины

/*СТИЛИ ДЛЯ КОРЗИНЫ*/
.wc-block-cart-item__wrap a.wc-block-components-product-name {
	text-decoration: none;
	margin: 0;
    text-decoration: none;
    font-family: Alaskan;
    font-size: 20px;
    line-height: 1;
    color: #000000;
    border-radius: 5px;
    transition: 0.5s;}
.wc-block-cart-item__wrap a.wc-block-components-product-name:hover {
	color: #545454;
    transition: 0.5s;}
.wc-block-cart__submit-container {
	display: flex;
    justify-content: center;}
.wc-block-cart__submit-container a.components-button {
	text-decoration: none;
    margin: 0;
    width: 310px;
	min-height: 0!important;
    height: 45px;
    border-radius: 10px;
    background-color: #ffd33f;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Alaskan;
    font-size: 20px;
    line-height: 1;
    color: #000000;
    transition: 0.5s;}
.wc-block-cart__submit-container a.components-button:hover {
    background-color: #000000;
    color: #ffd33f;
    transition: 0.5s;}
.wc-block-cart__submit-container button.components-button {
	border: none;
	text-decoration: none;
    margin: 0;
    width: 310px;
	min-height: 0!important;
    height: 45px;
    border-radius: 10px;
    background-color: #dddddd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Alaskan;
    font-size: 20px;
    line-height: 1;
    color: #000000;
    transition: 0.5s;}
.wp-block-product-new {
	display: none;}

CSS для элементов оформления заказа

/*СТИЛИ ДЛЯ ФОРМЛЕНИЯ ЗАКАЗА*/
.wc-block-components-order-summary-item__description span.wc-block-components-product-name {
	margin: 0;
    text-decoration: none;
    font-family: Alaskan;
    font-size: 15px;
    line-height: 1;
    color: #000000;
    text-align: left;}
.wc-block-components-order-summary-item__description span.wc-block-components-product-price__value {
	margin: 0;
    text-decoration: none;
    font-family: Alaskan;
    font-size: 15px;
	font-weight: 700;
    line-height: 1;
    color: #000000;
    text-align: left;}
.wc-block-components-product-metadata__description p {
	margin: 7px 0!important;
    text-decoration: none;
    font-family: Alaskan;
    font-size: 13px;
    line-height: 1!important;
    color: #000000;
    text-align: left;}
.wc-block-checkout__actions_row a.wc-block-components-checkout-return-to-cart-button {
	margin: 0;
    text-decoration: none;
    font-family: Alaskan;
    font-size: 20px;
    line-height: 1;
    color: #000000;
    border-radius: 5px;
    transition: 0.5s;}
.wc-block-checkout__actions_row a.wc-block-components-checkout-return-to-cart-button:hover {
    color: #545454;
    transition: 0.5s;}
.wc-block-checkout__actions_row button.components-button {
	border: none;
	text-decoration: none;
    margin: 0;
    width: 310px;
	min-height: 0!important;
    height: 45px;
    border-radius: 10px;
    background-color: #ffd33f;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Alaskan;
    font-size: 20px;
    line-height: 1;
    color: #000000;
    transition: 0.5s;}
.wc-block-checkout__actions_row button.components-button:hover {
    background-color: #000000;
    color: #ffd33f;
    transition: 0.5s;}
.woocommerce-table__product-name a {
	margin: 0;
    text-decoration: none;
    font-family: Alaskan;
    font-size: 20px;
    line-height: 1;
    color: #000000;
    border-radius: 5px;
    transition: 0.5s;}
.woocommerce-table__product-name a:hover {
    color: #545454;
    transition: 0.5s;}
.woocommerce .woocommerce-customer-details address {
	border: 2px solid #ffd33f!important;}