Если вы хотите изменить только внешний вид, вы можете проверить элементы на своей странице, найти классы или идентификаторы и добавить что-то подобное в свой стиль. css
.product-buttons a:last-child {
float: right;
background-color: sandybrown;
padding: 5px 20px;
border-radius: 8px;
}
Если вы хотите изменить порядок элементов, вам нужно будет отредактировать шаблон этого элемента карты.
РЕДАКТИРОВАТЬ: Я думаю / надеюсь, что вы заинтересованы в изучении, как делать такие вещи, я опишу основы c concept.
В вашей css вашей цели находится поле с изображением и информацией в нем. Вы будете скрывать эту информацию по умолчанию. Если окно наведено, информация будет отображаться.
Поэтому сначала мы устанавливаем кнопки в окне невидимыми, устанавливая непрозрачность на ноль:
.product-grid-view .product-buttons {
opacity: 0;
}
Если навести родительский элемент (product-grid-view), кнопки продукта в нем станут полностью видимыми, непрозрачность не более одного:
.product-grid-view:hover .product-buttons {
opacity: 1;
}
Вы можете добавить переход, чтобы он выглядел гладко:
.product-grid-view .product-buttons {
transition: opacity .3s ease-in-out;
}
Это должно дать вам кое-что для начала.
РЕДАКТИРОВАТЬ 2:
Если вы хотите, чтобы кнопки появлялись при наведении изображения, вы можете сделать использование селектора CSS all next siblings .
.product-grid-view .product-images:hover ~ .product-buttons {
opacity: 1;
}
Вам все еще нужны определения css, чтобы установить непрозрачность по умолчанию на ноль и установить переход. Таким образом, вы должны заменить второй из трех блоков кода, которые я постет в своем последнем редактировании.