smallfish-design

nstem css

Jul 31st, 2026
34
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.87 KB | None | 0 0
  1. /* Checkout - Order Summary (Cart)
  2. Format: page subsection class
  3. Author: Sasha Cheek
  4. td:nth-child(2) {
  5. width: 100% !important;
  6. */
  7.  
  8. /* Page-wide */
  9.  
  10. div.woocommerce {
  11. margin: 20px auto !important;
  12. }
  13.  
  14.  
  15. .shipping-calculator-button{
  16. display: flex;
  17. justify-content: flex-start;
  18. }
  19. .woocommerce-shipping-destination{
  20. padding: 0;
  21. font-size: 15px !important;
  22. }
  23. /* .woocommerce-cart-form */
  24.  
  25. div.woocommerce .woocommerce-cart-form {
  26. box-shadow: none;
  27. padding: 0;
  28. display: inline-block;
  29. max-width: 50%;
  30. }
  31.  
  32. div.woocommerce .woocommerce-cart-form .cart {
  33. border: 0;
  34.  
  35. }
  36.  
  37. div.woocommerce .woocommerce-cart-form thead {
  38. display: none;
  39. }
  40.  
  41. div.woocommerce .woocommerce-cart-form .cart_item td {
  42. padding: 0px;
  43. border: 0;
  44. }
  45.  
  46. div.woocommerce .woocommerce-cart-form .cart_item {
  47. height: 100px;
  48. }
  49.  
  50. div.woocommerce .woocommerce-cart-form td {
  51. padding: 10px 0px !important;
  52. }
  53.  
  54. div.woocommerce .woocommerce-cart-form .product-name a {
  55. font-weight: bold;
  56. color: black;
  57. }
  58.  
  59. div.woocommerce .woocommerce-cart-form .product-name a:hover {
  60. color: #0063a8;
  61. }
  62.  
  63.  
  64. div.woocommerce .woocommerce-cart-form .product-thumbnail img {
  65. width: 100%;
  66. padding: 0 10px;
  67. }
  68.  
  69. div.woocommerce .woocommerce-cart-form .product-thumbnail{
  70. width: 100px !important;
  71. }
  72.  
  73. div.woocommerce .woocommerce-cart-form .product-name {
  74. display: inline;
  75. }
  76.  
  77. div.woocommerce .woocommerce-cart-form .product-price {
  78. display: none
  79. }
  80.  
  81. div.woocommerce .woocommerce-cart-form .product-quantity {
  82. display: block;
  83. }
  84.  
  85. div.woocommerce .woocommerce-cart-form .product-subtotal {
  86. display: inline;
  87. float: right;
  88. }
  89.  
  90. div.woocommerce .woocommerce-cart-form .qty {
  91. background-color: lightgrey;
  92. box-shadow: none;
  93. border-radius: 50px;
  94. padding: 0;
  95. }
  96.  
  97. div.woocommerce .woocommerce-cart-form .coupon {
  98. background-color: lightgrey;
  99. padding: 10px;
  100. border-radius: 15px;
  101. width: 100%;
  102. margin-bottom: 10px;
  103. }
  104.  
  105. div.woocommerce .woocommerce-cart-form #coupon_code {
  106. box-shadow: none;
  107. border: none;
  108. padding-top: 0;
  109. padding-bottom: 0;
  110. margin: 0px 10px;
  111. border-radius: 50px;
  112. }
  113.  
  114. div.woocommerce .woocommerce-cart-form #coupon_code::placeholder {
  115. opacity: 50%;
  116. }
  117.  
  118. div.woocommerce .woocommerce-cart-form .coupon .button {
  119. background-color: #003b64;
  120. border-radius: 50px;
  121. }
  122.  
  123. /* .cart-collaterals */
  124.  
  125. div.woocommerce .cart-collaterals {
  126. display: flex;
  127. justify-content: center;
  128. max-width: 40%;
  129. float: right;
  130. }
  131.  
  132. div.woocommerce .cart-collaterals .cart_totals {
  133. background-color: lightgray;
  134. padding: 10px;
  135. border-radius: 15px;
  136. }
  137.  
  138. div.woocommerce .cart-collaterals .cart_totals {
  139. width: 100%;
  140. }
  141.  
  142. div.woocommerce .cart-collaterals .cart_totals h2 {
  143. display: none;
  144. }
  145.  
  146. div.woocommerce .cart-collaterals .shop_table {
  147. border: 0;
  148. }
  149.  
  150. div.woocommerce .cart-collaterals th {
  151. border: 0 !important;
  152. font-weight: 400 !important;
  153. }
  154.  
  155. div.woocommerce .cart-collaterals td {
  156. border: 0 !important;
  157. text-align: right;
  158. font-weight: bold;
  159. }
  160.  
  161. .woocommerce-shipping-totals{
  162.  
  163. }
  164.  
  165. div.woocommerce .cart-collaterals .shipping td {
  166. font-weight: 400;
  167. }
  168.  
  169. div.woocommerce .cart-collaterals .woocommerce-shipping-calculator {
  170. margin: 10px 0 0 0;
  171. padding: 0;
  172. background-color: lightgray;
  173. box-shadow: none;
  174. }
  175.  
  176. div.woocommerce .cart-collaterals .shipping-calculator-button { padding: 10px 0;
  177. margin: 0;
  178. }
  179.  
  180. div.woocommerce .cart-collaterals .woocommerce-shipping-methods li::marker {
  181. color: transparent;
  182. }
  183.  
  184. div.woocommerce .cart-collaterals .button {
  185. background-color: #003b64;
  186. border-radius: 50px;
  187. }
  188.  
  189. @media only screen and (max-width: 1280px) {
  190. div.woocommerce .woocommerce-cart-form {
  191. width: 100%;
  192. max-width: 100%;
  193. }
  194.  
  195. div.woocommerce .cart-collaterals {
  196. max-width: 100%;
  197. }
  198.  
  199. div.woocommerce .woocommerce-cart-form .product-thumbnail img {
  200. max-width: 300px;
  201. }
  202.  
  203. div.woocommerce .woocommerce-cart-form .product-name {
  204. display: table-cell;
  205. vertical-align: top;
  206. }
  207.  
  208. div.woocommerce .woocommerce-cart-form .product-quantity {
  209. display: table-cell; vertical-align: top;
  210. }
  211.  
  212. .woocommerce-cart-form .product-subtotal {
  213. display: table-cell;
  214. }
  215. }
  216.  
  217. @media only screen and (max-width: 860px) {
  218.  
  219. div.woocommerce .woocommerce-cart-form .cart_item {
  220. height: auto;
  221. }
  222.  
  223. div.woocommerce .woocommerce-cart-form tr {
  224. display: flex;
  225. }
  226.  
  227. div.woocommerce .woocommerce-cart-form .product-thumbnail::before {
  228. display: none;
  229. }
  230.  
  231. div.woocommerce .woocommerce-cart-form .product-thumbnail a {
  232. display: inline-block;
  233. }
  234.  
  235. div.woocommerce .woocommerce-cart-form .product-thumbnail {
  236. display: block;
  237. }
  238.  
  239. div.woocommerce .woocommerce-cart-form .product-name::before {
  240. display: none;
  241. }
  242.  
  243. div.woocommerce .woocommerce-cart-form .product-name {
  244. text-align: left !important;
  245. font-size: 3vw !important;
  246. }
  247.  
  248. div.woocommerce .woocommerce-cart-form .product-quantity::before {
  249. display: none;
  250. }
  251.  
  252. div.woocommerce .woocommerce-cart-form .product-quantity {
  253. text-align: left !important;
  254. }
  255.  
  256. div.woocommerce .woocommerce-cart-form .qty {
  257. width: 50px;
  258. }
  259.  
  260. div.woocommerce .woocommerce-cart-form .product-subtotal::before {
  261. display: none;
  262. }
  263.  
  264. div.woocommerce .woocommerce-cart-form .product-subtotal {
  265. text-align: left !important;
  266. }
  267. div.woocommerce .woocommerce-cart-form .coupon::before {
  268. display: none;
  269. }
  270.  
  271. div.woocommerce .woocommerce-cart-form .actions {
  272. width: 100%
  273. }
  274.  
  275. div.woocommerce .woocommerce-cart-form #coupon_code {
  276. margin: 0;
  277. width: 100% !important;
  278. }
  279.  
  280. div.woocommerce .woocommerce-cart-form .coupon .button {
  281. width: 100% !important;
  282. margin-top: 10px;
  283. }
  284.  
  285. div.woocommerce .cart-collaterals td {
  286. width: 100%;
  287. }
  288.  
  289. div.woocommerce .cart-collaterals .woocommerce-shipping-destination {
  290. text-align: center;
  291. }
  292.  
  293. div.woocommerce .cart-collaterals .woocommerce-shipping-calculator {
  294. text-align: center;
  295. }
  296. }
Advertisement
Add Comment
Please, Sign In to add comment