API tools faq
paste
Udoro

Build Woocommerce store in Oxygen part two CSS

Udoro
Jul 25th, 2021 (edited)
714
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.36 KB | None | 0 0
raw download clone embed print report
  1. /*RECENTLY VIEWED ON ARCHIVE */
  2.  
  3. .recently-viewed-archive span.product-title {
  4. width: 100%;
  5. overflow: hidden;
  6. display: inline-block;
  7. font-size:12px
  8. }
  9.  
  10. .recently-viewed-archive ul.product_list_widget {
  11. display: flex;
  12. gap: 10px;
  13. flex-wrap:wrap;
  14. justify-content: center;
  15. }
  16.  
  17. .recently-viewed-archive .woocommerce ul.product_list_widget li {
  18. padding: 8px;
  19. border:none;
  20. display: fLex;
  21. flex-direction: column;
  22. border-radius: 5px;
  23. box-shadow: 0 0 7px -3px 00000047;
  24. background: white;
  25. }
  26.  
  27. .recently-viewed-archive ul.product_list_widget a {
  28. max-width:200px;
  29. font-size:12px;
  30. flex-grow: 1;
  31. }
  32.  
  33. .recently-viewed-archive .woocommerce ul.product_list_widget li img {
  34.  
  35. width: 100%;
  36. object-fit: cover;
  37. border:none
  38. }
  39.  
  40. .recently-viewed-archive .woocommerce-Price-amount {
  41.  
  42. font-size:12px;
  43.  
  44. }
  45.  
  46.  
  47. /*SINGLE PRODUCT GALLERY SLIDER*/
  48. ul.flex-direction-nav {
  49. position: absolute;
  50. top: 30%;
  51. z-index: 100;
  52. width: 100%;
  53. left: 0;
  54. margin: 0;
  55. padding: 0px;
  56. list-style: none;}
  57.  
  58. li.flex-nav-prev {float: left;}
  59. li.flex-nav-next {float: right;}
  60. a.flex-next {visibility:hidden;}
  61. a.flex-prev {visibility:hidden;}
  62.  
  63. a.flex-next::after {
  64. visibility:visible;
  65. content: '\2771';
  66. margin-right: 10px;
  67. font-size: 40px;
  68. font-weight: bold;
  69. }
  70. a.flex-prev::before {
  71. visibility:visible;
  72. content: '\2770';
  73. margin-left: 10px;
  74. font-size: 40px;
  75. font-weight: bold;
  76. }
  77. ul.flex-direction-nav li a {
  78. color: #ccc;
  79. }
  80. ul.flex-direction-nav li a:hover {
  81. text-decoration: none;
  82. }
  83.  
  84. .flex-control-nav::-webkit-scrollbar-track
  85. {
  86.  
  87.  
  88. background-color: #e2e2e2;
  89. }
  90.  
  91. .flex-control-nav::-webkit-scrollbar
  92. {
  93.  
  94. background-color: #F5F5F5;
  95. }
  96.  
  97. .flex-control-nav::-webkit-scrollbar-thumb
  98. {
  99.  
  100. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  101. background-color: #555;
  102. }
  103.  
  104. /*woocommerce button*/
  105. .woocommerce ul.products li.product .button {
  106.  
  107. padding: 10px 20px;
  108. background: var(--secondary-color);
  109. }
  110. .woocommerce ul.products li.product .button:hover {
  111.  
  112.  
  113. background: var(--primary-color);
  114. }
  115.  
  116.  
  117.  
  118. /*SHORTEN PRODUCT NAME */
  119.  
  120. .woocommerce-loop-product__title {
  121. white-space: normal;
  122. overflow: hidden;
  123. text-overflow: ellipsis;
  124. height: 4.25em;
  125. margin-bottom: 8px!important;
  126. }
  127.  
  128.  
  129.  
  130. /*QUIKC BUY BUTTON*/
  131.  
  132. .quick-buy.single_add_to_cart_button.button
  133. {background: var(--secondary-color)!important}
  134.  
  135. .quick-buy.single_add_to_cart_button.button:hover
  136. {background: var(--primary-color)!important}
  137.  
  138.  
  139. /*SINGLE PRODCUT SALE BADGE*/
  140. .woocommerce ul.products li.product .onsale, .woocommerce span.onsale {
  141.  
  142. font-size: 10px;
  143. border-radius: 0;
  144. top: 5px;
  145. left: 5px;
  146. text-transform: uppercase;
  147. letter-spacing: 1px;
  148. }
  149.  
  150.  
  151. /*REMOVE MARGIN BOTTOM FROM PRODUCT IMAGES*/
  152. .woocommerce ul.products li.product a img {
  153.  
  154. margin: 0;}
  155.  
  156.  
  157. /*WIDGET TITLES*/
  158.  
  159. .ct-widget .widget.woocommerce .widgettitle {
  160. font-size: 16px;
  161.  
  162. }
  163.  
  164. /*RELATED PRODUCTS ON SINGLE PRODUCT PAGE*/
  165. .related.products li.product{
  166. border: solid 1px #f0f0f0;
  167. margin:0!important;
  168. padding:min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem)!important;
  169.  
  170. }
  171.  
  172. .related.products ul.products {
  173. margin: 0;
  174. }
  175. .related.products .woocommerce-loop-product__title, .upsells.products .woocommerce-loop-product__title {
  176. text-overflow: ellipsis;
  177. overflow: hidden;
  178. }
  179.  
  180.  
  181. /* PRODUCT TABS CONTAINER IN SINGLE PRODUCT PAGE*/
  182. .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs, .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs {
  183. display: flex;
  184. }
  185.  
  186. .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li, .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li {
  187.  
  188. margin: 0;
  189.  
  190. }
  191.  
  192.  
  193.  
  194. /* TABS */
  195. .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li a, .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li a {
  196.  
  197. padding: 12px 12px;
  198.  
  199. }
  200.  
  201.  
  202. /*REVIEW TAB ON SINGLE PRODUCT PAGE*/
  203.  
  204. .woocommerce .oxy-product-tabs .star-rating span, .woocommerce .oxy-product-tabs .star-rating::before {
  205. color: rgb(255 119 0 / 89%);
  206. }
  207.  
  208. #reviews .cr-summaryBox-wrap, #cr_all_reviews_shortcode .cr-summaryBox-wrap, .ivole-reviews-grid .cr-summaryBox-wrap {
  209. flex-direction: column;
  210.  
  211. }
  212.  
  213.  
  214. #reviews .cr-summaryBox-wrap .cr-overall-rating-wrap, #cr_all_reviews_shortcode .cr-summaryBox-wrap .cr-overall-rating-wrap, .ivole-reviews-grid .cr-summaryBox-wrap .cr-overall-rating-wrap, #reviews .cr-summaryBox-wrap .ivole-summaryBox, #reviews .cr-summaryBox-wrap .cr-overall-rating-wrap, #cr_all_reviews_shortcode .cr-summaryBox-wrap .ivole-summaryBox, #cr_all_reviews_shortcode .cr-summaryBox-wrap .cr-overall-rating-wrap, .ivole-reviews-grid .cr-summaryBox-wrap .ivole-summaryBox, .ivole-reviews-grid .cr-summaryBox-wrap .cr-overall-rating-wrap {
  215.  
  216. width: auto; border:none;
  217. }
  218.  
  219.  
  220.  
  221. .woocommerce .oxy-product-tabs #reviews #comments ol.commentlist li .comment-text, div.cr-all-reviews-shortcode ol.commentlist li .comment-text {
  222.  
  223. margin: 0;
  224. }
  225.  
  226. .woocommerce .oxy-product-tabs #reviews #comments ol.commentlist li .comment-text{
  227. border: solid 1px var(--border-color);
  228. border-radius: 5px;
  229.  
  230. }
  231.  
  232.  
  233. .woocommerce-cart table.cart td.actions .coupon .input-text, .select2-container--default .select2-search--dropdown .select2-search__field, .woocommerce textarea, .select2-dropdown, .woocommerce .select2-selection, .woocommerce input[type="search"], .woocommerce input[type="text"], .woocommerce input[type="number"], .woocommerce input[type="tel"], .woocommerce input[type="email"], .woocommerce input[type="password"], .woocommerce select {
  234.  
  235. max-width: 100%;
  236. }
  237.  
  238.  
  239. /*Q&A TAB IN SINGLE PRODUCT PAGE */
  240.  
  241. #tab-title-reviews {
  242. width: 50%;
  243. }
  244.  
  245. #tab-title-cr_qna {
  246. width: 50%;
  247. }
  248.  
  249.  
  250. #cr_qna.cr-qna-block div.cr-qna-search-block {
  251. display: flex;
  252. flex-direction: column;
  253. gap: 10px;
  254. }
  255.  
  256. #reviews.cr-reviews-ajax-reviews .cr-ajax-search div, #cr_qna.cr-qna-block div.cr-qna-search-block div {
  257.  
  258. font-size: 14px;
  259. }
  260.  
  261.  
  262. #cr_qna.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-q-q .cr-qna-list-q-q-r .cr-qna-list-question, #cr_qna.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-q-a .cr-qna-list-q-a-r .cr-qna-list-answer-s {
  263. font-size: 16px;
  264.  
  265. }
  266.  
  267. #cr_qna.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-q-q .cr-qna-list-q-q-r .cr-qna-list-q-author, #cr_qna.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-q-a .cr-qna-list-q-a-r .cr-qna-list-q-author {
  268. font-size: 10px;
  269.  
  270. margin-top: 5px;
  271.  
  272. }
  273.  
  274. #cr_qna.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-q-b .cr-qna-list-q-b-r {
  275.  
  276. width: 100%;
  277. display: flex;
  278. flex-direction: column;
  279. gap: 9px;
  280. }
  281.  
  282. #cr_qna.cr-qna-block div.cr-qna-search-block button.cr-qna-ask-button {
  283. font-size: 16px;
  284.  
  285. background: #33335c;
  286.  
  287. border-radius: 5px;
  288.  
  289.  
  290. margin: 0;
  291. padding: 5px 15px;
  292. }
  293.  
  294.  
  295. #cr_qna.cr-qna-block div.cr-qna-list-block .cr-qna-list-q-cont button.cr-qna-ans-button {
  296. font-size: 14px;
  297.  
  298. border: 1.5px solid #ff861c;
  299. border-radius: 5px;
  300.  
  301. color: #ff861c;
  302. width: 100%;
  303. }
  304.  
  305.  
  306.  
  307. /*REMOVE AVATAR FROM REVIEW*/
  308. .woocommerce .oxy-product-tabs #reviews #comments ol.commentlist li img.avatar, div.cr-all-reviews-shortcode ol li.comment div.comment_container img.avatar, div.cr-all-reviews-shortcode ol li.review div.comment_container img.avatar {
  309.  
  310. display: none;
  311. }
  312.  
  313.  
  314. #cr_all_reviews_shortcode ol.commentlist {
  315. padding: 0 1em;
  316.  
  317. }
  318.  
  319.  
  320. div.cr-all-reviews-shortcode ol li.comment, div.cr-all-reviews-shortcode ol li.review {
  321.  
  322. margin-bottom: 1em;
  323.  
  324. }
  325.  
  326.  
  327.  
  328. /*REVIEW BARS*/
  329.  
  330. .ivole-meter {
  331.  
  332. background: none;
  333. background-color: #ddd;
  334. height: 10px;
  335. box-shadow: none;
  336.  
  337. }
  338.  
  339. .ivole-meter .ivole-meter-bar {
  340.  
  341. background: none;
  342. background-color: #ffa034;
  343. box-shadow: none;
  344.  
  345. }
  346.  
  347.  
  348.  
  349. /*SWATCHES FOR ATTRIBUTES AND VARIATIONS*/
  350.  
  351. li.variable-item.button-variable-item.selected {
  352. border: solid 1px #1c6df4;
  353. box-shadow: 0 0 7px 2px #1c6df4!important;
  354. }
  355.  
  356.  
  357.  
  358. /*PRODUCT PRICE ON SINGLE PRODUCT*/
  359. .product-info p.price {
  360. display: flex;
  361. gap: 10px;
  362. }
  363.  
  364. /*RECENTLY VIEWED ON SINGLE PRODUCT */
  365.  
  366.  
  367.  
  368. .recently-viewed-single h2.widgettitle, .recently-viewed-single .woocommerce-Price-amount {
  369. font-size: 12px!important;
  370. }
  371.  
  372.  
  373. .recently-viewed-single .woocommerce ul.product_list_widget li img {
  374.  
  375. width: auto;
  376. max-width: 6em;
  377. border:none;
  378. margin-bottom: 4px;
  379. margin-right: 4px;
  380. margin-top: 4px;
  381.  
  382. }
  383.  
  384. .recently-viewed-single .product_list_widget a {
  385. font-size: 10px;
  386. line-height: 1.3
  387. }
  388.  
  389.  
  390.  
  391. /*ADDED TO CART MESSAGE*/
  392. .woocommerce-info, .woocommerce-error, .woocommerce-message {
  393.  
  394. background: #fff6da;
  395. padding: 4px 20px 4px 50px;
  396. font-size: 12px;
  397. }
  398.  
  399. .woocommerce-message .button.wc-forward {
  400. background: #2d4ddb;
  401. border: 1px solid #2d4ddb;
  402. font-size: 10px;
  403. border-radius: 0px;
  404. padding: 6px 14px;
  405. border-radius: 0;
  406.  
  407. }
  408.  
  409.  
  410. .woocommerce-message .button.wc-forward:hover {
  411. background: #2d4ddb;
  412.  
  413.  
  414. }
  415.  
  416.  
  417. .woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before {
  418.  
  419. top: 0.4em;
  420.  
  421. }
  422.  
  423.  
  424. @media all and (max-width:800px){
  425.  
  426. #tab-title-reviews {
  427. width: 100%;
  428. }
  429.  
  430. #tab-title-cr_qna {
  431. width: 100%;
  432. }
  433.  
  434.  
  435. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!