Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Displaying Products in WooCommerce Shop and Archives
- similar to Agency Pro's Grid with Product Info on Hover.
- --------------------------------------------------------- */
- .woocommerce.shop-archive ul.products {
- margin-top: 40px;
- width: 100%;
- }
- .woocommerce.shop-archive ul.products li.product {
- width: 33.3333%;
- margin: 0;
- background-color: #333;
- }
- .woocommerce.shop-archive ul.products li.product a img {
- margin: 0;
- }
- .product-meta {
- position: absolute;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- -moz-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- -o-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- opacity: 0;
- text-align: center;
- width: 100%;
- transition: all 0.3s ease-in-out 0s;
- }
- .woocommerce ul.products li.product a.product-meta-link {
- padding-bottom: 20px;
- display: block;
- }
- .woocommerce.shop-archive ul.products li.product .onsale {
- z-index: 1;
- margin: 0 -.5em 0 0;
- width: 55px;
- height: 55px;
- right: 8px
- }
- .woocommerce.shop-archive ul.products li.product:hover a img {
- opacity: 0.1;
- }
- .woocommerce.shop-archive ul.products li.product:hover .product-meta {
- opacity: 1;
- }
- .woocommerce.shop-archive ul.products li.product h3 {
- font-size: 30px;
- }
- .woocommerce.shop-archive .products .star-rating {
- margin: 0 auto;
- }
- .woocommerce.shop-archive ul.products li.product .price {
- margin-top: 10px;
- margin-bottom: 0;
- font-size: 1.3em;
- color: #d7c603;
- font-family: "Spinnaker",sans-serif;
- }
- p.excerpt {
- padding: 0 40px;
- }
- .product-meta a,
- .woocommerce.shop-archive .star-rating {
- color: #fff;
- }
- span.read-more {
- color: #d7c603;
- text-transform: uppercase;
- font-family: "Spinnaker",sans-serif;
- }
- .woocommerce.shop-archive a.button {
- background-color: #edb624;
- color: #333;
- }
- .woocommerce.shop-archive ul.products li.product .button {
- margin-top: 0;
- }
- .woocommerce.shop-archive nav.woocommerce-pagination {
- margin-top: 40px;
- margin-bottom: 30px;
- font-family: 'Spinnaker', sans-serif;
- font-size: 14px;
- }
- .woocommerce.shop-archive nav.woocommerce-pagination ul {
- border: none;
- }
- .woocommerce.shop-archive nav.woocommerce-pagination ul li {
- border-right: none;
- margin-right: 5px;
- }
- .woocommerce.shop-archive nav.woocommerce-pagination ul li a {
- color: #333;
- background-color: #fff;
- border-radius: 3px;
- padding: 8px 12px;
- line-height: 1.5;
- }
- .woocommerce.shop-archive nav.woocommerce-pagination ul li a:hover {
- background-color: #d7c603;
- color: #fff;
- }
- .woocommerce.shop-archive nav.woocommerce-pagination ul li span.current {
- background-color: #d7c603;
- color: #fff;
- border-radius: 3px;
- padding: 8px 12px;
- line-height: 1.5;
- }
- .woocommerce.shop-archive table.variations {
- margin-bottom: 0;
- line-height: 1;
- padding: 0 10px;
- }
- .woocommerce.shop-archive .quantity .qty {
- padding: 5px;
- }
- .woocommerce.shop-archive select#pa_color {
- width: 60%;
- }
- .woocommerce.shop-archive a.reset_variations {
- margin-left: 20px;
- }
- @media only screen and (max-width: 1024px) {
- .product-meta {
- position: static;
- -webkit-transform: none;
- -moz-transform: none;
- -ms-transform: none;
- -o-transform: none;
- transform: none;
- opacity: 1;
- padding: 40px 0;
- }
- .woocommerce.shop-archive ul.products li.product:hover a img {
- opacity: 1;
- }
- .woocommerce.shop-archive ul.products li.product h3 {
- padding-top: 0;
- }
- }
- @media only screen and (max-width: 768px) {
- .woocommerce.shop-archive ul.products li.product {
- width: 50%;
- }
- }
- @media only screen and (max-width: 500px) {
- .woocommerce.shop-archive ul.products li.product {
- width: 100%;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment