API tools faq
paste
oscarviedma

Estilos página de carrito, finalizar compra y mi cuenta woo

oscarviedma
Sep 17th, 2020 (edited)
1,324
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.24 KB | None | 0 0
raw download clone embed print report
  1. /*** ESTILOS WOOCOMMERCE POR OV DIVI ***/
  2.  
  3. /** Página Carrito **/
  4. .woocommerce table.shop_table thead tr {
  5.   background-color: #f8f8f8;
  6.   border-radius: 4px;
  7. }
  8.  
  9. .woocommerce table.shop_table thead tr th {
  10.   border: none;
  11.   font-size: 16px;
  12.   line-height: 1.3;
  13.   font-weight: 600;
  14.   color: #111;
  15.   padding: 16px 12px !important;
  16.   text-align: left;
  17. }
  18.  
  19. .entry-content table:not(.variations), body.et-pb-preview #main-content .container table {
  20.   border: 1px solid #f8f8f8;
  21.   margin: 0 0 15px;
  22.   text-align: left;
  23.   width: 100%;
  24. }
  25.  
  26. .woocommerce table.shop_table td {
  27.   border-top: 1px solid #ebe9eb;
  28.   padding: 9px 12px;
  29.   vertical-align: middle;
  30.   line-height: 1.5em;
  31. }
  32.  
  33. .woocommerce table.shop_table tbody tr td.product-remove a {
  34.   font-size: 22px;
  35.   color: #111111 !important;
  36.   border: 1px solid #d9d9d9;
  37.   height: 26px;
  38.   width: 26px;
  39.   line-height: 23px;
  40.   border-radius: 50%;
  41.   font-weight: 400;
  42. }
  43.  
  44. .woocommerce table.shop_table tbody tr td.product-remove a:hover {
  45.   background-color: red !important;
  46.   border-color: red !important;
  47.   color: #fff !important;
  48. }
  49.  
  50. #add_payment_method table.cart img, .woocommerce-cart table.cart img, .woocommerce-checkout table.cart img {
  51.   width: 70px;
  52.   box-shadow: none;
  53. }
  54.  
  55. .woocommerce .cart_item {
  56.   font-size: 15px;
  57.   font-weight: 600;
  58. }
  59.  
  60. .woocommerce #content .quantity input.qty, .woocommerce-cart table.cart td.actions .coupon .input-text, .woocommerce-page #content .quantity input.qty, .woocommerce-page .quantity input.qty, .woocommerce .quantity input.qty {
  61.   font-weight: 500!important;
  62.   font-size: 18px!important;
  63.   color: #111!important;
  64.   border-radius: 3px;
  65.   border: 1px solid #d9d9d9 !important;
  66.   background-color: #fbfbfb!important;
  67.   height: 40px;
  68. }
  69.  
  70. .woocommerce-cart table.cart td.actions .coupon .input-text {
  71.   font-size: 18px !important;
  72. }
  73. .woocommerce-cart table.cart td.actions .coupon .input-text::placeholder {
  74.   color: #444;
  75.   font-size: 15px;
  76. }
  77.  
  78. .woocommerce .coupon .button {
  79.   font-size: 16px !important;
  80. }
  81.  
  82. .woocommerce-cart-form table.shop_table .button:disabled, .woocommerce-cart-form table.shop_table .button:disabled:hover {
  83.   padding: .3em 1em;
  84.   font-size: 16px !important;
  85. }
  86.  
  87. .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
  88.   float: right;
  89.   width: 48%;
  90.   background: #f8f8f8;
  91.   border-radius: 4px;
  92. }
  93.  
  94. .woocommerce .cart-collaterals .cart_totals h2 {
  95.   font-size: 16px;
  96.   font-weight: 600;
  97.   color: #fff;
  98.   background: #4d2def;
  99.   padding: 20px;
  100.   border-radius: 4px 4px 0 0;
  101. }
  102.  
  103. .woocommerce .cart-collaterals table tbody > tr > th {
  104.   font-size: 15px;
  105.   padding: 10px 25px 20px 25px;
  106. }
  107.  
  108. .woocommerce .cart-collaterals table tbody > tr > td {
  109. font-size: 16px;
  110. }
  111.  
  112. .woocommerce .cart_totals .checkout-button {
  113.   font-size: 18px !important;
  114.   margin: 0 25px 20px;
  115. }
  116. .woocommerce .cart_totals .checkout-button:after {
  117.   font-size: 24px !important;
  118.   line-height: 1.3 !important;
  119. }
  120.  
  121. .woocommerce-cart .cart-collaterals .cart_totals table {
  122.   margin-bottom: 0px !important;
  123. }
  124.  
  125. /* Colocar carrito a dos columnas */
  126. /* @media only screen and (min-width: 981px) {
  127.   .woocommerce .woocommerce-cart-form {
  128.     width: 60%;
  129.     float: left;
  130.     margin-bottom: 100px;
  131.   }
  132.   .woocommerce .cart-collaterals {
  133.     width: 35%;
  134.     float: right;
  135.     padding: 0;
  136.     margin-bottom: 40px;
  137.   }
  138.   .woocommerce-cart .cart-collaterals .cart_totals {
  139.     width: 100% !important;
  140.     float: none;
  141.   }
  142. } */
  143.  
  144.  
  145. /** Página Finalizar Compra **/
  146. .woocommerce-info a {
  147.   color: #fff!important;
  148.   text-decoration: underline;
  149. }
  150.  
  151. .woocommerce-error, .woocommerce-info, .woocommerce-message {
  152.   font-size: 16px!important;
  153.   color: #fff!important;
  154. }
  155.  
  156. .woocommerce .woocommerce-checkout {
  157.   margin-top: 60px;
  158. }
  159.  
  160. .woocommerce .woocommerce-billing-fields h3, .woocommerce-additional-fields h3, #order_review_heading {
  161.   font-weight: 600;
  162.   margin-bottom: 12px;
  163.   color: #111;
  164. }
  165.  
  166. .woocommerce-additional-fields {
  167.   margin-top: 40px;
  168. }
  169.  
  170. input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
  171.   color: #111;
  172.   font-weight: 600;
  173.   background-color: #fff;
  174.   border: 1px solid #d6d6d6;
  175.   background-color: #f9f9f9;
  176.   height: 45px;
  177. }
  178.  
  179. .select2-container--default .select2-selection--single {
  180.   background-color: #fff;
  181.   border: 1px solid #d6d6d6;
  182.   background-color: #f9f9f9;
  183.   height: 45px;
  184.   border-radius: 4px;
  185. }
  186.  
  187. .select2-container--default .select2-selection--single .select2-selection__rendered {
  188.   color: #111;
  189.   font-weight: 600;
  190.   line-height: 42px;
  191.   height: 45px;
  192.   padding-left: 15px;
  193. }
  194.  
  195. .select2-container--default .select2-selection--single .select2-selection__arrow {
  196.   height: 44px;
  197. }
  198.  
  199. .select2-container--default .select2-selection--single .select2-selection__arrow b {
  200.   border-color: #333 transparent transparent transparent;
  201. }
  202.  
  203. .select2-dropdown {
  204.   background-color: #fff;
  205.   border: 1px solid #d6d6d6;
  206. }
  207.  
  208. .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
  209.   background-color: #4d2def;
  210.   color: #fff;
  211. }
  212.  
  213. .select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[data-selected=true] {
  214.   font-weight: bold;
  215. }
  216.  
  217. .select2-container--default .select2-search--dropdown .select2-search__field {
  218.   border: 1px solid #d6d6d6;
  219.   background: #f9f9f9;
  220.   height: 40px;
  221. }
  222.  
  223. .woocommerce form .form-row {
  224.   padding: 3px;
  225.   margin: 0 0 18px;
  226. }
  227.  
  228. .woocommerce form .form-row label {
  229.   line-height: 1.5;
  230.   margin-bottom: 8px;
  231. }
  232.  
  233. .woocommerce-checkout .woocommerce table.shop_table td {
  234.   border-top: 1px solid #ebe9eb;
  235.   padding: 14px 12px;
  236.   vertical-align: middle;
  237.   line-height: 1.5em;
  238. }
  239.  
  240. #add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
  241.   background: #f8f8f8;
  242.   border-radius: 5px;
  243. }
  244.  
  245. #add_payment_method #payment ul.payment_methods li, .woocommerce-cart #payment ul.payment_methods li, .woocommerce-checkout #payment ul.payment_methods li {
  246.   line-height: 1.6;
  247.   text-align: left;
  248.   margin: 0;
  249.   font-weight: 400;
  250.   font-size: 15px !important;
  251. }
  252.  
  253. .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p {
  254.   font-size: 13px !important;
  255.   line-height: 1.6;
  256.   color: #333;
  257. }
  258.  
  259. .woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
  260.   float: left;
  261.   margin-top: 20px;
  262.   margin-bottom: 5px;
  263.   width: 100%;
  264. }
  265.  
  266. #add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
  267.   font-size: 14px;
  268.   line-height: 1.7;
  269.   background-color: #eee;
  270.   color: #333;
  271. }
  272.  
  273. #add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before {
  274.   content: "";
  275.   display: block;
  276.   border: 1em solid #eeeeee;
  277.   border-right-color: transparent;
  278.   border-left-color: transparent;
  279.   border-top-color: transparent;
  280.   position: absolute;
  281.   top: -.75em;
  282.   left: 0;
  283.   margin: -1em 0 0 2em;
  284. }
  285.  
  286. .woocommerce-checkout .woocommerce .cart_item {
  287.   font-size: 14px;
  288. }
  289. .woocommerce-checkout .woocommerce .woocommerce-checkout-review-order .order-total {
  290.   font-size: 15px;
  291. }
  292.  
  293. .woocommerce-checkout #payment ul.payment_methods li {
  294.   margin-bottom: 8px;
  295. }
  296. .woocommerce-checkout-payment li label {
  297.   font-weight: 600;
  298. }
  299.  
  300. .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
  301.   float: left;
  302.   width: 100%;
  303. }
  304.  
  305. .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
  306.   float: right;
  307.   width: 100%;
  308. }
  309.  
  310. .woocommerce-order-received .woocommerce-thankyou-order-received {
  311.   font-size: 16px;
  312.   font-weight: bold;
  313.   margin-bottom: 20px;
  314. }
  315.  
  316. .woocommerce-order-received h2 {
  317.   font-size: 20px;
  318.   font-weight: 600;
  319.   margin-bottom: 10px;
  320. }
  321.  
  322. @media screen and (min-width: 980px) {
  323. .woocommerce-checkout form.checkout .col2-set {
  324.     width: 60% !important;
  325.     float: left;
  326.     padding: 0 90px 0 10px;
  327.   }
  328. .woocommerce-checkout form.checkout .woocommerce-checkout-review-order {
  329.     width: 40%;
  330.     float: right;
  331.     margin-top: 10px;
  332.   }
  333. }
  334.  
  335. /** Página Mi Cuenta **/
  336. .woocommerce-account .woocommerce-MyAccount-navigation {
  337.   width: 22%;
  338. }
  339.  
  340. .woocommerce-account .woocommerce-MyAccount-content {
  341.   display: inline-block;
  342.   float: left;
  343.   margin-left: 8%;
  344.   width: 70%;
  345. }
  346.  
  347. .woocommerce-account .woocommerce-MyAccount-navigation ul {
  348.   padding: 0;
  349.   background-color: #f9f9f9;
  350. }
  351.  
  352. .woocommerce-account .woocommerce-MyAccount-navigation ul li {
  353.   list-style: none;
  354.   padding: 0 12px;
  355.   border-bottom: 1px solid #eee;
  356. }
  357. .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active {
  358.   background-color: #eee;
  359. }
  360.  
  361. .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
  362.   border-bottom: none;
  363. }
  364.  
  365. .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:before {
  366.   opacity: 1;
  367. }
  368.  
  369. .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  370.   padding: 14px 5px;
  371.   display: block;
  372.   font-weight: 600;
  373. }
  374.  
  375. .woocommerce-account .woocommerce-MyAccount-navigation ul li a:before {
  376.   margin-right: 20px;
  377.   opacity: .25;
  378. }
  379.  
  380. .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover:before {
  381.   opacity: 1;
  382. }
  383.  
  384. .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a:before {
  385.   font-family: 'etmodules';
  386.   content: "\e074";
  387. }
  388.  
  389. .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a:before {
  390.   font-family: 'etmodules';
  391.   content: "\e07a";
  392. }
  393.  
  394. .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads a:before {
  395.   font-family: 'etmodules';
  396.   content: "\e05f";
  397. }
  398.  
  399. .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a:before {
  400.   font-family: 'etmodules';
  401.   content: "\e081"
  402. }
  403.  
  404. .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods a:before {
  405.   font-family: 'etmodules';
  406.   content: "\e014";
  407. }
  408.  
  409. .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a:before {
  410.   font-family: 'etmodules';
  411.   content: "\e0f7";
  412. }
  413.  
  414. .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:before {
  415.   font-family: 'etmodules';
  416.   content: "\e06c";
  417. }
  418.  
  419. .woocommerce-account .woocommerce table.my_account_orders {
  420.   font-size: 14px;
  421. }
  422.  
  423. .woocommerce-orders .woocommerce-button.view {
  424.   font-size: 14px;
  425. }
  426. .woocommerce-orders .woocommerce-button.view:after {
  427.   font-size: 24px;
  428. }
  429.  
  430. .woocommerce-account .woocommerce-Message .woocommerce-Button, .woocommerce-downloads .woocommerce-Message .woocommerce-Button:hover {
  431.   font-size: 16px !important;
  432.   border: 2px solid #fff !important;
  433. }
  434.  
  435. .woocommerce-account h2, .woocommerce-account h3 {
  436.   font-size: 20px;
  437.   font-weight: 600;
  438.   margin-bottom: 10px;
  439.   color: #111;
  440. }
  441.  
  442. .woocommerce-account .woocommerce-order-details__title, .woocommerce-account .woocommerce-order-downloads__title {
  443.   margin-top: 20px;
  444. }
  445.  
  446. .woocommerce-account .woocommerce-Address {
  447.   margin-bottom: 20px;
  448. }
  449.  
  450. .woocommerce-edit-account .woocommerce-Input--email {
  451.   margin-bottom: 20px !important;
  452. }
  453. .woocommerce-edit-account fieldset legend {
  454.   font-size: 16px;
  455.   font-weight: 600;
  456.   margin-top: 10px;
  457.   margin-bottom: 5px;
  458. }
  459.  
  460. @media only screen and (max-width: 768px) {
  461.   .woocommerce-account .woocommerce-MyAccount-navigation {
  462.     width: 100%;
  463.     margin-bottom: 35px;
  464.   }
  465.   .woocommerce-account .woocommerce-MyAccount-content  {
  466.     margin-left: 0;
  467.     width: 100%;
  468.   }
  469. }
  470.  
  471. /** WooCommerce Responsive General **/
  472. @media screen and (max-width: 768px) {
  473.   .woocommerce table.shop_table thead tr th, .woocommerce .cart_item {
  474.     font-size: 14px;
  475.   }
  476.  
  477.   .woocommerce-error, .woocommerce-info, .woocommerce-message {
  478.     font-size: 14px!important;
  479.   }
  480.  
  481.   .woocommerce .coupon .button {
  482.     font-size: 13px!important;
  483.   }
  484.  
  485.   .woocommerce .cart_totals .checkout-button {
  486.     font-size: 16px!important;
  487.     margin: 0 25px 20px;
  488.   }
  489.  
  490.   .woocommerce-cart-form table.shop_table .button:disabled, .woocommerce-cart-form table.shop_table .button:disabled:hover {
  491.     font-size: 14px!important;
  492.   }
  493.  
  494.   .woocommerce form .form-row {
  495.     padding: 3px;
  496.     margin: 0 0 10px;
  497.   }
  498.  
  499.   .woocommerce .woocommerce-checkout {
  500.     margin-top: 40px;
  501.   }
  502.  
  503.   .woocommerce-additional-fields {
  504.     margin-top: 0px;
  505.     margin-bottom: 40px;
  506.   }
  507.  
  508.   .woocommerce .woocommerce-billing-fields h3, .woocommerce-additional-fields h3, #order_review_heading {
  509.     font-size: 18px;
  510.   }
  511.  
  512.   .woocommerce-order-received h2 {
  513.     font-size: 18px;
  514.   }
  515.  
  516.   .woocommerce-account h2, .woocommerce-account h3 {
  517.     font-size: 16px;
  518.   }
  519.  
  520.   .woocommerce-account .woocommerce-Message .woocommerce-Button, .woocommerce-downloads .woocommerce-Message .woocommerce-Button:hover {
  521.     font-size: 14px !important;
  522.     border: 1px solid #fff !important;
  523.   }
  524. }
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!