srikat

Untitled

Oct 7th, 2016
262
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.69 KB | None | 0 0
  1. /* Displaying Products in WooCommerce Shop and Archives
  2. similar to Agency Pro's Grid with Product Info on Hover.
  3. --------------------------------------------------------- */
  4.  
  5. .woocommerce.shop-archive ul.products {
  6. margin-top: 40px;
  7. width: 100%;
  8. }
  9.  
  10. .woocommerce.shop-archive ul.products li.product {
  11. width: 33.3333%;
  12. margin: 0;
  13. background-color: #333;
  14. }
  15.  
  16. .woocommerce.shop-archive ul.products li.product a img {
  17. margin: 0;
  18. }
  19.  
  20. .product-meta {
  21. position: absolute;
  22. top: 50%;
  23. left: 50%;
  24. -webkit-transform: translate(-50%, -50%);
  25. -moz-transform: translate(-50%, -50%);
  26. -ms-transform: translate(-50%, -50%);
  27. -o-transform: translate(-50%, -50%);
  28. transform: translate(-50%, -50%);
  29. opacity: 0;
  30. text-align: center;
  31. width: 100%;
  32. transition: all 0.3s ease-in-out 0s;
  33. }
  34.  
  35. .woocommerce ul.products li.product a.product-meta-link {
  36. padding-bottom: 20px;
  37. display: block;
  38. }
  39.  
  40. .woocommerce.shop-archive ul.products li.product .onsale {
  41. z-index: 1;
  42. margin: 0 -.5em 0 0;
  43. width: 55px;
  44. height: 55px;
  45. right: 8px
  46. }
  47.  
  48. .woocommerce.shop-archive ul.products li.product:hover a img {
  49. opacity: 0.1;
  50. }
  51.  
  52. .woocommerce.shop-archive ul.products li.product:hover .product-meta {
  53. opacity: 1;
  54. }
  55.  
  56. .woocommerce.shop-archive ul.products li.product h3 {
  57. font-size: 30px;
  58. }
  59.  
  60. .woocommerce.shop-archive .products .star-rating {
  61. margin: 0 auto;
  62. }
  63.  
  64. .woocommerce.shop-archive ul.products li.product .price {
  65. margin-top: 10px;
  66. margin-bottom: 0;
  67. font-size: 1.3em;
  68. color: #d7c603;
  69. font-family: "Spinnaker",sans-serif;
  70. }
  71.  
  72. p.excerpt {
  73. padding: 0 40px;
  74. }
  75.  
  76. .product-meta a,
  77. .woocommerce.shop-archive .star-rating {
  78. color: #fff;
  79. }
  80.  
  81. span.read-more {
  82. color: #d7c603;
  83. text-transform: uppercase;
  84. font-family: "Spinnaker",sans-serif;
  85. }
  86.  
  87. .woocommerce.shop-archive a.button {
  88. background-color: #edb624;
  89. color: #333;
  90. }
  91.  
  92. .woocommerce.shop-archive ul.products li.product .button {
  93. margin-top: 0;
  94. }
  95.  
  96. .woocommerce.shop-archive nav.woocommerce-pagination {
  97. margin-top: 40px;
  98. margin-bottom: 30px;
  99. font-family: 'Spinnaker', sans-serif;
  100. font-size: 14px;
  101. }
  102.  
  103. .woocommerce.shop-archive nav.woocommerce-pagination ul {
  104. border: none;
  105. }
  106.  
  107. .woocommerce.shop-archive nav.woocommerce-pagination ul li {
  108. border-right: none;
  109. margin-right: 5px;
  110. }
  111.  
  112. .woocommerce.shop-archive nav.woocommerce-pagination ul li a {
  113. color: #333;
  114. background-color: #fff;
  115. border-radius: 3px;
  116. padding: 8px 12px;
  117. line-height: 1.5;
  118. }
  119.  
  120. .woocommerce.shop-archive nav.woocommerce-pagination ul li a:hover {
  121. background-color: #d7c603;
  122. color: #fff;
  123. }
  124.  
  125. .woocommerce.shop-archive nav.woocommerce-pagination ul li span.current {
  126. background-color: #d7c603;
  127. color: #fff;
  128. border-radius: 3px;
  129. padding: 8px 12px;
  130. line-height: 1.5;
  131. }
  132.  
  133. .woocommerce.shop-archive table.variations {
  134. margin-bottom: 0;
  135. line-height: 1;
  136. padding: 0 10px;
  137. }
  138.  
  139. .woocommerce.shop-archive .quantity .qty {
  140. padding: 5px;
  141. }
  142.  
  143. .woocommerce.shop-archive select#pa_color {
  144. width: 60%;
  145. }
  146.  
  147. .woocommerce.shop-archive a.reset_variations {
  148. margin-left: 20px;
  149. }
  150.  
  151. @media only screen and (max-width: 1024px) {
  152.  
  153. .product-meta {
  154. position: static;
  155. -webkit-transform: none;
  156. -moz-transform: none;
  157. -ms-transform: none;
  158. -o-transform: none;
  159. transform: none;
  160. opacity: 1;
  161. padding: 40px 0;
  162. }
  163.  
  164. .woocommerce.shop-archive ul.products li.product:hover a img {
  165. opacity: 1;
  166. }
  167.  
  168. .woocommerce.shop-archive ul.products li.product h3 {
  169. padding-top: 0;
  170. }
  171.  
  172. }
  173.  
  174. @media only screen and (max-width: 768px) {
  175.  
  176. .woocommerce.shop-archive ul.products li.product {
  177. width: 50%;
  178. }
  179.  
  180. }
  181.  
  182. @media only screen and (max-width: 500px) {
  183.  
  184. .woocommerce.shop-archive ul.products li.product {
  185. width: 100%;
  186. }
  187.  
  188. }
Advertisement
Add Comment
Please, Sign In to add comment