Custom Code for Elementor Woocommerce Purchase Summary

Resolved

(@sonjamarie)

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>

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

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

Thread Starter

sonjamarie

(@sonjamarie)

3 years, 10 months ago

If the link can’t be accessed, for more info here’s CSS for one of the cells in the order details table that I’m wanting to edit. I want 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;
}

Plugin Support

Stuart Duff – a11n

(@stuartduff)

Automattic Happiness Engineer

3 years, 10 months ago

Hi @sonjamarie

What’s the exact section of the HTML you’re trying to add a left-padding for?

Would that be the content within this section of the HTML table?

<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>

Thread Starter

sonjamarie

(@sonjamarie)

3 years, 10 months ago

Hi Stuart,

This is the relevant code for the table and hopefully this link may work https://sonjachisnall.com/purchase-summary/order-received/10217/?key=wc_order_Bm8QHr9qXa780 :

<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;<del>1</del> <ins>0</ins></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">Testing</th>
						<td><span class="woocommerce-Price-amount amount">-<span class="woocommerce-Price-currencySymbol">$</span>16</span></td>
					</tr>
										<tr>
						<th scope="row">Order Total:</th>
						<td><del aria-hidden="true">$16</del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1</span></ins></td>
					</tr>
										</tfoot>
	</table>

Plugin Support

Stuart Duff – a11n

(@stuartduff)

Automattic Happiness Engineer

3 years, 10 months ago

Hey @sonjamarie

Thanks for the HTML and a direct link to the order page 🙂

Looking at the order received page I can see what you mean by the padding being a little off.

Screenshot: https://snipboard.io/9NqaTe.jpg

Inspecting the CSS output for us it seems the issue is being caused by the Elementor plugin’s CSS output. Testing the CSS below on your site made that look better.

.woocommerce-order-received .order_details th,
.woocommerce-order-received .order_details td {
    padding: 10px !important;
}

Screenshot: https://snipboard.io/TWGBMI.jpg

You can add CSS to a WordPress installation by navigating to WordPress Admin > Appearance > Customize > Additional CSS

If you require any further assistance with the styling of elements due to using Elementor we’d suggest reaching out to the Elementor support team.

https://elementor.com/support/

I hope this helps.

Thread Starter

sonjamarie

(@sonjamarie)

3 years, 10 months ago

That’s perfect! Thank you 🙂

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

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