Custom Code for Purchase Summary

  • If anyone’s familiar with the Woocommerce Elementor purchase 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 2 years, 8 months ago by Jan Dembowski.

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

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

    (@sonjamarie)

    In case it helps as I presume the link can’t be accessed, here’s 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;
}

    Hi, please send me the URL of the page where the issue occurs.

    Thread Starter sonjamarie

    (@sonjamarie)

    Hi, it occurs on this page for example (I created a test order so the table product table would display):

    [ redundant link removed ]

    I would like the adjustment to be both on desktop and mobile.

    • This reply was modified 2 years, 8 months ago by Jan Dembowski.

    Hi,

    Since you are an Elementor Pro user, you can open a support ticket at my.elementor.com.

    I’d also suggest you check out our Elementor Community forum, we have created it to connect Elementor users together and share knowledge, my.elementor.com.

    www.ads-software.com rules state that commercial products are not supported here.

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    Looking at your site, you are an Elementor Pro v3.7.2 user. The developer can’t have a conversation with customers here. That’s not permitted for anyone.

    For pro or commercial product support please contact the developer directly on their site. This includes any pre-sales topics as well.

    https://my.elementor.com/

    As the developer is aware, commercial products are not supported in these forums. I am sure they will have no problem supporting you there.

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    @sonjamarie I have archived your new topic and flagged your account for moderation.

    You are an Elementor Pro user and cannot seek Elementor support on this site. Use the support option you paid for.

    https://my.elementor.com/

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Custom Code for Purchase Summary’ is closed to new replies.