Personalize Checkout.

  • Posts: 128
  • Thank you received: 0
11 years 1 month ago #154397

Hi!
I am looking to customize my hikashop checkout. I know that we can select configurations in the walkthrough to checkout.
However, I want to customize the lay out of it. Its doing?
Which file should I edit?









I would like the progress bar to be like this:




Can anyone help me?

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 83933
  • Thank you received: 13588
  • MODERATOR
11 years 1 month ago #154412

Hi,

The style of the progress bar in non bootstrap mode is defined by the CSS code below :

.hikashop_cart_bar{
	background: url(../images/line.png) repeat-x scroll 100% 50% transparent;
	padding-bottom:0;
	padding-top:43px;
	margin-bottom:30px;
}
#hikashop_checkout_page div.hikashop_cart_bar{
	text-align:center;
}
#hikashop_checkout_page .hikashop_cart_step.hikashop_cart_step_current {
	-moz-background-inline-policy:continuous;
	background: url("../images/current_step.png") no-repeat scroll 50% 0px transparent;
	color:#363636;
}
#hikashop_checkout_page .hikashop_cart_step.hikashop_cart_step_finished {
	-moz-background-inline-policy:continuous;
	background: url("../images/finished_step.png") no-repeat scroll 50% 0px transparent;
	color:#363636;
}
#hikashop_checkout_page div.hikashop_cart_step span {
	position:relative;
	left:4%;
	width:auto;
	font-size:11px;
}
#hikashop_checkout_page div.hikashop_cart_step span a {
	color:#B2B2B2;
	font-size:11px;
	text-decoration:none;
}
#hikashop_checkout_page .hikashop_cart_step.hikashop_cart_step_finished span a {
	color:#363636;
}
.hikashop_cart_step {
	-moz-background-inline-policy:continuous;
	background: url("../images/step.png") no-repeat scroll 50% 0px transparent;
	display:inline;
	padding-top:25px;
	padding-right:8%;
	white-space:nowrap;
}
You can find it in the frontend CSS file of HikaShop that you can edit via the Display tab of the configuration.

Please Log in or Create an account to join the conversation.

  • Posts: 128
  • Thank you received: 0
11 years 1 month ago #154594

OK
But do not think you understood my question.
When we completed an application it redirects to the checkout page, correct!
On the checkout page, has all steps on the same page (login, address, method of delivery, Payment, coupon, cart, order status ...).
Only it is the correct one step per page.
However, all the steps are the same page.
Can you help me?

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 83933
  • Thank you received: 13588
  • MODERATOR
11 years 1 month ago #154616

Hi,

If you want to have the views in different steps, then you need to modify the "Checkout workflow" option of the Checkout tab of the configuration. Just drag'n'drop each view to a new step there.

Please Log in or Create an account to join the conversation.

  • Posts: 128
  • Thank you received: 0
11 years 1 month ago #154695

Solved!
Thank you very much!

Please Log in or Create an account to join the conversation.

Time to create page: 0.139 seconds
Powered by Kunena Forum