Я использую этот фрагмент кода для продуктов своего веб-сайта, и он отлично работает.
Хотя я хочу изменить стиль, он уже должен выглядеть примерно так, как показано на изображении ниже. Значки должны быть на фоне черного круга с горизонтальной линией между ними.
Я пытался измените значок 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
Как добавить время обработки к продуктам WooCommerce ⇐ CSS
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
Добавить собственный класс к продуктам на странице корзины woocommerce [блокирует]
Anonymous » » в форуме Php - 0 Ответы
- 16 Просмотры
-
Последнее сообщение Anonymous
-
-
-
Добавьте класс к продуктам на страницах архива категорий WooCommerce на основе поля ACF.
Anonymous » » в форуме Php - 0 Ответы
- 10 Просмотры
-
Последнее сообщение Anonymous
-