CSS settings: radio buttons for payment

  • Posts: 111
  • Thank you received: 0
  • Hikashop Essential
9 years 5 months ago #203578

-- url of the page with the problem -- : www.portal-gestao.com/listagem-de-produt...out/step/step-2.html
-- HikaShop version -- : 240
-- Joomla version -- : 341

Hello,

Is it possible to display the payment methods with radio buttons ("List" in the configuration options) instead of the following:



By the way, I'd also like to center the quantity, delete, update buttons from the quantity fileds. They are aligned to the left:



Thank you for your support!

Attachments:

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

  • Posts: 26159
  • Thank you received: 4028
  • MODERATOR
9 years 5 months ago #203598

Hi,

Sure !
You can easily override the CSS of HikaShop (or add new CSS rules in your template) in order to change that.

In the listing of the payment methods, when you're using the bootstrap design, we hide the radio buttons and we use instead the selection by "button".
But you can add a CSS rule (or remove the CSS rule in the HikaShop CSS) in order to force the display (or remove the rule which hide it) the payment/shipping radio.

About the quantity alignment, using the same process (CSS override) you can set that the content in that table cell (class "hikashop_cart_product_quantity_value" will be centered).

For more details on how customize the HikaShop display, I recommend you that documentation :
www.hikashop.com/support/support/documen...ize-the-display.html
It will explain you how to do in HikaShop and the basic to inspect the DOM and find the right CSS selectors for your new CSS rules.

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 111
  • Thank you received: 0
  • Hikashop Essential
9 years 5 months ago #203828

Regarding the payment buttons above, the code the page is generating is the following:

<tbody><tr class="row0">
				<td>
					<input class="hikashop_checkout_payment_radio" id="radio_paypal_1" type="radio" name="hikashop_payment" value="paypal_1" onclick="this.form.action=this.form.action+'#hikashop_payment_methods';this.form.submit(); return false;">
					<label class="btn btn-radio" for="radio_paypal_1">PayPal ou Cartão de crédito</label>
					<span class="hikashop_checkout_payment_cost">
					</span>
					<span class="hikashop_checkout_payment_image">
						<img src="/media/com_hikashop/images/payment/MasterCard.jpg" alt="">
						<img src="/media/com_hikashop/images/payment/VISA.jpg" alt="">
						<img src="/media/com_hikashop/images/payment/Credit_card.jpg" alt="">
						<img src="/media/com_hikashop/images/payment/PayPal.jpg" alt="">
					</span>
					<div class="hikashop_checkout_payment_description"></div>
					<div class="ccinfo">
<div style="margin: 0px; position: static; overflow: hidden; height: 0px;"><div id="hikashop_credit_card_paypal_1" class="hikashop_credit_card" style="margin: 0px; overflow: hidden;">
</div></div>
					</div>
				</td>
			</tr>
			<tr class="row1">
				<td>
					<input class="hikashop_checkout_payment_radio" id="radio_banktransfer_2" type="radio" name="hikashop_payment" value="banktransfer_2" checked="checked">
					<label class="btn btn-radio active btn-primary" for="radio_banktransfer_2">Transferência Bancária</label>
					<span class="hikashop_checkout_payment_cost">
					</span>
					<span class="hikashop_checkout_payment_image">
						<img src="/media/com_hikashop/images/payment/Bank_transfer.jpg" alt="">
					</span>
					<div class="hikashop_checkout_payment_description"><p></p></div>
					<div class="ccinfo">
<div style="margin: 0px; position: static; overflow: hidden;"><div id="hikashop_credit_card_banktransfer_2" class="hikashop_credit_card" style="margin: 0px; overflow: hidden;">
</div></div>
					</div>
				</td>
			</tr>
		</tbody>

It looks like a table.

What class or id are you using to remove the radio?

Thakn you

Last edit: 9 years 5 months ago by nunonog.

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

  • Posts: 26159
  • Thank you received: 4028
  • MODERATOR
9 years 5 months ago #203835

Hi,

Please follow the instructions from my previous message in order to analyze the CSS thanks to the browser inspector.
Thanks to that you will see the radio in the dom and see the associated CSS rules, like that one

.hika-radio input[type="radio"] {
	display:none;
}

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 111
  • Thank you received: 0
  • Hikashop Essential
9 years 5 months ago #203925

Ok, thanks!

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

Time to create page: 0.073 seconds
Powered by Kunena Forum