Я использую этот фрагмент кода для продуктов своего веб-сайта, и он отлично работает.
Хотя я хочу изменить стиль, он уже должен выглядеть примерно так, как показано на изображении ниже. Значки должны быть на фоне черного круга с горизонтальной линией между ними.
Я пытался измените значок 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
Разбираемся в CSS
-
Anonymous
1716287463
Anonymous
Я использую этот фрагмент кода для продуктов своего веб-сайта, и он отлично работает.
Хотя я хочу изменить стиль, он уже должен выглядеть примерно так, как показано на изображении ниже. Значки должны быть на фоне черного круга с горизонтальной линией между ними.[i]
Я пытался измените значок 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;
}
[/i]
Ordered
[i][/i]
[i] grey;">[/i]
Shipped
[i][/i]
[i] grey;">[/i]
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);
});
Подробнее здесь: [url]https://stackoverflow.com/questions/78510214/how-to-add-processing-times-to-woocommerce-products[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия