[fernandocd79Participant]

Hi there,

I’m having a problem integrating Woocommerce with PayFort plug. I get an error after the transaction is successful. See the sequence of steps attached.

The return link where I get the 404 is http://www.spanishgurus.com/shop/checkout/order-received/1623?key=wc_order_56e6d0e7e0d72

Additionally I have a couple of formatting questions about cart and checkout pages:
http://www.spanishgurus.com/shop/cart/
http://www.spanishgurus.com/shop/checkout/

– Can I make cart and checkout pages to occupy less space? I mean, can I make them be be in a container page or if they are already in a container, can I make this container to occupy say 70% of the full container?
– Can I make the payment selector section in checkout page to appear centered (in the same way that Cart Totals appear in cart page)?
Cart and checkout pages formatting

Thanks in advance

Fernando

[FriechModerator]

Hi There,

Thanks for writing in! To make the cart and checkout page main container width to 70%, you can add this under Custom > CSS in the Customizer.

.woocommerce-checkout .x-main.full,
.woocommerce-cart .x-main.full {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

You can do the same attributes to center the payment selector section in checkout page.

.woocommerce-checkout .woocommerce-checkout-payment {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

Regarding the PayFort plug; Regretfully, we cannot provide support for third party plugins as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[fernandocd79Participant]

Hi support,

Much better now, thanks. Now, “Your order” looks a bit awkward (excess lines to the right of Totals), how can I center it in the container and remove the excess lines?

Regarding the third-party plug-in integration, could you at least tell me the format of the URL that Woocommerce expects as a return from the payment plugin? In other words, the plugin is calling http://www.spanishgurus.com/shop/checkout/order-received/1623?key=wc_order_56e6d0e7e0d72, which I guess is not the right address that Woocommerce is expecting.

Thanks in advance

Fernando

[RadModerator]

Hi there,

About the URL, I can’t really answer that I’m not very familiar with how woocommerce payment works. It’s best to contact a woocommerce developer or the community for proper guidance.

And for extra lines, I don’t see any lines from your screenshot or by checking your checkout page. Maybe you’re referring to extra space? It varies depending on screen size, the bigger screen, the larger space. The solution is aligning your prices to the right.

.woocommerce-checkout .product-total,
.woocommerce-checkout .cart-subtotal td,
.woocommerce-checkout .order-total td {
  text-align: right;
}

Hope this helps.

[fernandocd79Participant]

Hi there,

Thanks for the CSS 🙂 It looks nice now.

About the the Woocommerce payment error, I just realized that I have the same error when I pay via Paypal, which comes with X-theme and Woocommerce.

1) I select a shop item, a 1USD item.
2) Proceed with payment.
3) Choose Paypal and pay
4) When returning back to my site (www.spanishgurus.com) from Paypal, I get a 404. However, the funds get transferred.
– This is the return URL: https://www.spanishgurus.com/shop/checkout/order-received/1801?key=wc_order_56eae976eb1e2&utm_nooverride=1
– Attached the 404 screenshot

Would you guys be able to help?

Regards

Fernando

[RadModerator]

Hi there,

It’s not related to X theme, it’s only normal to display 404 when a page isn’t working or doesn’t exist. And WordPress will pick the theme’s 404 templates when it happens. But it doesn’t mean it’s X theme’s fault.

For example, https://www.spanishgurus.com/sample-page-woo page doesn’t actually added, but it’s not theme’s fault if it’s not added.

Would you mind re-saving your permalinks at Admin > Settings > Permalinks and check it again?

And please contact a woocommerce developer or your hosting provider to see the real issue behind it. I’m not familiar with the inner payment process, hence, I can’t provide solution or recommendation even if I want to. The only integration with X theme and woocommerce are few templates, it’s not directly connected to woocommerce system

Thanks for understanding.

[fernandocd79Participant]

Hi there,

Thanks. The 404 error was a problem with the permalinks 🙂

I still have some cosmetic problems:
– In the Order Received page, I get some mis-alignment (attachment)
– How can I make the “Thank You. The Order Has been received” in H3 to keep some formatting consistency?
– How can I center the block (Order Number, Date, Total, Payment Method) while keeping the left alignment?
– In the cart page, the “Update” button is too big. Can I make it one or two notches smaller? How can I increase the “proceed to checkout button”?
– In Main Shop page, how can I hide the “reset” button from the product filter?

Thanks in advance and regards

Fernando

[RadModerator]

Hi there,

Glad it’s fixed now.

1. Would you mind saving your order page as HTML and forward the file here? I can’t pass to the payment method since I need to pay. And that template is not part of X theme.

2. Please add this code to your child theme’s functions.php

add_filter('woocommerce_thankyou_order_received_text', 'woocommerce_thankyou_order_received_text_h3', 2 );

function woocommerce_thankyou_order_received_text_h3 ( $text, $order ) {

return '<h3>'.$text.'</h3>';

}

3. Same as #1

4. Please add this too,

.woocommerce .cart .actions>input {
    font-size: 80%;
}

  .wc-proceed-to-checkout a {
  font-size: 120%;
  }

5. While testing your site, your site breaks down at least on my end. It displays 403 Forbidden. I can no longer view it. Could be your site’s security?

Thanks.

[fernandocd79Participant]

Hi Support,

Thanks for your answer and sorry for the delay in answering back.

These are the pending issues:
– In the Order Received page, I get some mis-alignment (attachment order-received.zip and .png)
– How can I make the “Thank You. The Order Has been received” in H3 to keep some formatting consistency? I added your code to my child’s functions.php but it still doesn’t work.
– In Main Shop page, how can I hide the “reset” button from the product filter? I’ve deactivated all optimization plug-ins that could cause the errors you mentioned. It should work now.
– Is it possible to call a JS function (f.i. myfuncion() defined in the JS section of the page) when the user clicks on a Button element created via Cornerstone? I added ‘onclick=”myFunction()”‘ to button style in Cornerstone with this JS code but no luck:
function myFunction() {
alert(“I am an alert box 1!”);
console.log (“I am an alert box in the console!”);
}

Thanks in advance and best regards

Fernando

[fernandocd79Participant]

.html attached

[RadModerator]

Hi there,

1. The files aren’t available, please provide them again.

For the meantime, please try this one.

.order_details tr td:last-child {
text-align: right;
}

2. The code is meant to be added for child theme’s functions.php, but you don’t have active child theme. Please install and activate your child theme, then add the suggested code.

3. Please add this CSS as well to hide the reset Button.

.woof_reset_search_form {
display:none !important;
}

4. Not possible to add onClick event on cornerstone button’s element. But possible by using class, for example, let’s say you added the click_me_now to your button’s Class input/option. Then you can simply add this code to your custom javascript.

jQuery('.click_me_now').on('click', function() {
alert("I am an alert box 1!");
console.log ("I am an alert box in the console!");
} );

Or if you like to use function name

function myFunction() {
alert("I am an alert box 1!");
console.log ("I am an alert box in the console!");
}

jQuery('.click_me_now').on('click', myFunction );

Hope these helps.

[fernandocd79Participant]

Hi guys,

Thanks for your answer. Please find my comments:
1 – The CSS code didn’t work. Find in link the files you requested from me: https://www.dropbox.com/sh/p890a96bqcbxis4/AAAoJyfANNwg4J7mSK67SjDea?dl=0

2 – Thanks. It’s working now

3 – How can I make the reset and filter button smaller in my shop? I just realized that in handheld devices I need the buttons

4 – Thanks. It’s clear now

5 – When running PageSpeed, I am getting a “Prioritize visible content”. How can I follow Google guidelines with X-Theme? https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent#overview

Thanks in advance

Fernando

[Paul RModerator]

Hi,

1. You can add this under Custom > CSS in the Customizer.

.shop_table.order_details tfoot td {
     text-align: right;
}

3. Kindly change the code given above with this

.woof_reset_search_form {
     padding: .563em 1.125em
     font-size: 16px;
}

You may change the font size and padding values to achieve your desired result.

5. Please refer to this link – https://community.theme.co/kb/performance/

Hope that helps.

[fernandocd79Participant]

Hi there,

Thanks for your replies.

The only pending thing is the the code for (3) It doesn’t change the format of the reset button https://www.spanishgurus.com/shop/?swoof=1&product_tag=c1

How can I display the filter button (it doesn’t show)?

Thanks in advance

Fernando

[RadModerator]

Hi there,

That CSS should work, but I can’t confirm it if it’s really added to your content due to cache and minification. Please disable cache plugin (eg. auto optimize plugin) while you’re doing changes to your site.

Thanks!

[Author]

Posts