Как добавить время обработки к продуктам WooCommerceCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Как добавить время обработки к продуктам WooCommerce

Сообщение Anonymous »

Я использую этот фрагмент кода для продуктов своего веб-сайта, и он отлично работает.
Хотя я хочу изменить стиль, он уже должен выглядеть примерно так, как показано на изображении ниже. Значки должны быть на фоне черного круга с горизонтальной линией между ними.
Я пытался измените значок FAS «угол-двойной правый» на горизонтальную линию, но он не отображает его. Как изменить стиль как на картинке?
/* Estimated delivery dates widget */
add_action( 'woocommerce_after_add_to_cart_form', 'delivery_status_widget', 40 );
function delivery_status_widget() {
global $product;
?>




.delivery-status-widget {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
font-size: 13px;
margin-bottom: 10px;
line-height: 15px;
padding: 14px 10px;
color: #121212;
background-color: white;
/* border: 1px dotted black;*/
/*color: #121212;*/
/* border-radius: 6px;*/
}
.delivery-status-widget .status {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 15px;
}
.delivery-status-widget .status-icon {
font-size: 24px;
margin-bottom: 5px;
color: #121212!important;
}
.delivery-status-widget .status-text {
font-weight: bold;
margin-bottom: 5px;
}
.delivery-status-widget .status-date {
font-size: 12px;
color: gray;
}




Ordered





grey;">
Shipped





grey;">
Delivered





jQuery(document).ready(function($) {
var today = new Date(),
shipVal = , // (Default value is "2")
deliVal = ; // (Default value is "6")

// Ordered
var orderedDate = today.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
$("#order-date").text(orderedDate);

// Shipped
var shipDate = new Date(today);
shipDate.setDate(today.getDate() + shipVal);
shipDate = shipDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
$("#ship-date").text(shipDate);

// Delivered
var deliveryDate = new Date(today);
deliveryDate.setDate(today.getDate() + deliVal);
deliveryDate = deliveryDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
$("#delivery-date").text(deliveryDate);
});



Подробнее здесь: https://stackoverflow.com/questions/785 ... e-products
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»