Увеличьте размер шрифта цены продукта только на страницах отдельных продуктов WooCommerce

Я добавил код, чтобы показать только самую низкую цену на переменный продукт, который отлично работает (см. Ниже)

add_action( 'woocommerce_before_single_product', 'move_variations_single_price', 1 );
function move_variations_single_price(){
    global $product, $post;

    if ( $product->is_type( 'variable' ) ) {
        // removing the variations price for variable products
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

        // Change location and inserting back the variations price
        add_action( 'woocommerce_single_product_summary', 'replace_variation_single_price', 10 );
    }
}

function replace_variation_single_price(){
    global $product;

    // Main Price
    $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
    $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    // Sale Price
    $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
    sort( $prices );
    $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    if ( $price !== $saleprice && $product->is_on_sale() ) {
        $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
    }

    ?>
    <style>
        div.woocommerce-variation-price,
        div.woocommerce-variation-availability,
        div.hidden-variable-price {
            height: 0px !important;
            overflow:hidden;
            position:relative;
            line-height: 0px !important;
            font-size: 0% !important;
        }
    </style>
    <script>
    jQuery(document).ready(function($) {
        $('select').blur( function(){
            if ( '' != $('input.variation_id').val() ){
                if ($('p.availability'))
                    $('p.availability').remove();
                $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class = "availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
                console.info($('input.variation_id').val());
            } else {
                $('p.price').html($('div.hidden-variable-price').html());
                if ($('p.availability'))
                    $('p.availability').remove();
                console.info('NULL');
            }
        });
    });
    </script>
    <?php

    echo '<p class = "price">'.$price.'</p>
    <div class = "hidden-variable-price" >'.$price.'</div>';
}    

Затем я использовал следующий код, чтобы попытаться увеличить размер шрифта для цены, которая также работает:

span.woocommerce-Price-amount.amount {
    font-size: 1.5em;
}

Но это также влияет на все другие страницы, такие как страница оформления заказа.

Есть ли способ изолировать этот код только для увеличения размера шрифта в области сводки продукта?

Пожалуйста, отправьте URL вашего сайта, и я предоставлю вам css

developerme 22.04.2019 09:19
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
1
1 364
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Пожалуйста, добавьте приведенный ниже код в свой дочерний файл CSS.

.single-product span.amount {

    font-size: 1.5em;

}

Большое спасибо! Это больше не влияет на другие страницы, но я забыл упомянуть одну вещь. Я показываю общую стоимость корзины покупок в заголовке. Этот код по-прежнему будет увеличивать размер шрифта значения корзины покупок в заголовке. Буду признателен за дальнейшие советы. Спасибо!

user11242294 22.04.2019 10:13

Другие вопросы по теме