Custom Code for Woocommerce Elementor Purchase Summary

  • sonjamarie

    (@sonjamarie)


    3 years, 10 months ago

    I don’t know that you’ll be able to access it as it’s the purchase summary page. However, If anyone’s familiar with the Woocommerce Elementor summary page widget, then you’ll notice the purchase summary section has two columns for the order details section which appears to be in a table format. The text of these two columns is right up against the left margin of the column which is poor design… clearly good developers, not so great designers. I’d love to have some padding like 5-10px between the text and the left margin and I’m too rusty on code to correctly adjust it myself.

    Here’s a snippet I gathered from page inspection for the section mentioned in case the link is inaccessible:

    <section class="woocommerce-order-details">
	
	<h2 class="woocommerce-order-details__title">Order Details</h2>

	<table class="woocommerce-table woocommerce-table--order-details shop_table order_details">

		<thead>
			<tr>
				<th class="woocommerce-table__product-name product-name">Product</th>
				<th class="woocommerce-table__product-table product-total">Total</th>
			</tr>
		</thead>

		<tbody>
			<tr class="woocommerce-table__line-item order_item">

	<td class="woocommerce-table__product-name product-name">
		<a href="https://sonjachisnall.com/product/test-product/">Test Product</a> <strong class="product-quantity">×&nbsp;1</strong>	</td>

	<td class="woocommerce-table__product-total product-total">
		<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>1</bdi></span>	</td>

</tr>

		</tbody>

		<tfoot>
								<tr>
						<th scope="row">Subtotal:</th>
						<td><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1</span></td>
					</tr>
										<tr>
						<th scope="row">Shipping:</th>
						<td><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>&nbsp;<small class="shipped_via">via Standard Shipping</small></td>
					</tr>
										<tr>
						<th scope="row">Tax:</th>
						<td><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>0</span></td>
					</tr>
										<tr>
						<th scope="row">Payment Method:</th>
						<td>Credit Card (Stripe)</td>
					</tr>
										<tr>
						<th scope="row">Order Total:</th>
						<td><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>16</span></td>
					</tr>
										</tfoot>
	</table>

	</section>
    • This topic was modified 3 years, 10 months ago by sonjamarie.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter sonjamarie

    (@sonjamarie)

    3 years, 10 months ago

    Further to that, some CSS for one of the cells in the order details table that I’m wanting to edit. I’m specifically wanting to edit just the order details section (I can also add the CSS to the widget specifically but I don’t want to affect the other sections only the order details table):

    element.style {
}
<style>
.elementor-10101 .elementor-element.elementor-element-1293bfe .shop_table thead tr th, .elementor-10101 .elementor-element.elementor-element-1293bfe .shop_table tfoot th, .elementor-10101 .elementor-element.elementor-element-1293bfe .shop_table tfoot tr td, .elementor-10101 .elementor-element.elementor-element-1293bfe .shop_table tfoot tr td span, .elementor-10101 .elementor-element.elementor-element-1293bfe .woocommerce-table--order-downloads tr td:before {
    font-size: 14px;
}
.elementor-widget-woocommerce-purchase-summary .woocommerce .shop_table tfoot td, .elementor-widget-woocommerce-purchase-summary .woocommerce .shop_table tfoot th {
    color: var(--order-details-titles-totals-color,#000);
}
.elementor-widget-woocommerce-purchase-summary .woocommerce .shop_table td, .elementor-widget-woocommerce-purchase-summary .woocommerce .shop_table th {
    border: 0;
    border-top: var(--tables-divider-border-width,1px) var(--tables-divider-border-type,solid) var(--tables-divider-border-color,#d4d4d4);
    padding-top: calc(var(--order-details-rows-gap, 18px) / 2);
    padding-bottom: calc(var(--order-details-rows-gap, 18px) / 2);
    padding-left: 0;
    padding-right: 0;
}
.woocommerce table.shop_table tfoot td {
    border-color: #eaeaea;
}
.woocommerce table.shop_table td {
    padding: 0.8em;
    vertical-align: middle;
    text-transform: capitalize;
    border-color: #eaeaea;
}
.elementor-widget-woocommerce-purchase-summary .woocommerce-table--order-details td {
    word-wrap: break-word;
}
.elementor *, .elementor :after, .elementor :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
table th, table td {
    padding: 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e9e9e9;
}
:not(input):not(textarea), img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
td, th {
    padding: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
td {
    display: table-cell;
    vertical-align: inherit;
}
.elementor-widget-woocommerce-purchase-summary .woocommerce .shop_table {
    font-size: 14px;
    margin-bottom: 0;
    padding: var(--sections-padding,15px 30px);
    background-color: var(--sections-background-color,#fff);
    border-radius: var(--sections-border-radius,3px);
    border: 1px var(--sections-border-type,solid) var(--sections-border-color,#d4d4d4);
}
.woocommerce table.shop_table {
    border-width: 1px;
    border-style: solid;
    margin: 0 -1px 24px 0;
    text-align: left;
    width: 100%;
    border-collapse: separate;
    border-color: #eaeaea;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
user agent stylesheet
table {
    border-collapse: separate;
    text-indent: initial;
    border-spacing: 2px;
}
<style>
.elementor-10101 .elementor-element.elementor-element-1293bfe {
    --buttons-border-color: #B8B8B8;
}
<style>
.elementor-10101 .elementor-element.elementor-element-1293bfe {
    --confirmation-message-display: block;
    --confirmation-message-alignment: start;
    --order-summary-alignment: start;
    --titles-color: #54595F;
    --general-text-color: var( --e-global-color-text );
    --payment-details-border-type: none;
    --order-details-rows-gap: 15px;
    --order-details-titles-totals-color: var( --e-global-color-secondary );
    --order-details-items-color: var( --e-global-color-secondary );
    --order-details-variations-color: var( --e-global-color-secondary );
    --order-details-product-links-normal-color: var( --e-global-color-secondary );
    --order-details-product-links-hover-color: var( --e-global-color-secondary );
    --button-normal-text-color: #5A5A5A;
    --buttons-border-type: double;
    --button-border-radius: 0px 0px 0px 0px;
}
.elementor-widget-woocommerce-purchase-summary {
    font-size: 14px;
    font-family: Roboto,sans-serif;
    color: #818a91;
}
.elementor-element {
    --widgets-spacing: 20px;
}
    Moderator t-p

    (@t-p)

    3 years, 10 months ago

    Question about woocommerce:
    I recommend asking at https://ww.wp.xz.cn/support/plugin/woocommerce/ so its developers and support community can help you with this.

    Question about elementor:
    I recommend asking at https://ww.wp.xz.cn/support/plugin/elementor/ so its developers and support community can help you with this.

    If your question is about a different plugin, then I recommend asking at that plugin’s dedicated support forum so its developers and support community can help you with this.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Custom Code for Woocommerce Elementor Purchase Summary’ is closed to new replies.